Adicionar elemento para div em uma posição relativa

nemo:

Eu estou tentando construir algo como o recurso de destaque no Médio. No evento clique, eu preciso adicionar um elemento que será em um position: absolutea seu pai onde o usuário clicou (não o corpo desde que o pai é overflow: scroll;)

A questão é adicionar o elemento marca no lugar correto.

1. Como posso encontrar o topo ea posição esquerda do que o usuário destaque?
2. Como posso adicionar o parente marcação para o elemento artigo? Sempre que o usuário rola, eu preciso do elemento de marca para ficar sobre o texto realçado.

Eu estou tentando configurá-los com o código abaixo;

mark.setAttribute("style", `top:${top}px`);
mark.setAttribute("style", `left:${left}px`);

https://codepen.io/nemo369/pen/ExjQgKy

const article =document.querySelector(`article`);

article.addEventListener('mouseup', function () {
  var result =  window.getSelection().toString();
  const oldMark =document.querySelector(`.mark`);
  if(oldMark){
    article.removeChild(oldMark);
  }
  window.getSelection().empty()
  if(result){
    let mark = document.createElement('mark');
    mark.innerText =  `${result}`;
    mark.classList.add('mark');
    var top = 5;
    var left = 15
mark.setAttribute("style", `top:${top}px`);
mark.setAttribute("style", `left:${left}px`);
    article.appendChild(mark);
  }
});

main{
     display: flex;
flex-direction:column;
  height:100vh;
  align-items:center;
  justify-content: center;
}
article{
  max-height:30%;
overflow:scroll;
  flex:0 0 50vw;
  position: relative;
}
.mark{
      position: absolute;
  top:50%;
  left:50%;
}

<main>
  <article>
    
    <p>I'm trying to build something like the highlight feature in Medium.<br>
The issue is that in the click event I need to add an element that will be in a <strong>position absolute</strong> to his parent and not the body since the parent is <strong>overflow: scroll;<strong><br>

How can I find those x and y conditions?

 </p>
          
    <p>I'm trying to build something like the highlight feature in Medium.<br>
The issue is that in the click event I need to add an element that will be in a <strong>position absolute</strong> to his parent and not the body since the parent is <strong>overflow: scroll;<strong><br>

How can I find those x and y conditions?

 </p>
          
    <p>I'm trying to build something like the highlight feature in Medium.<br>
The issue is that in the click event I need to add an element that will be in a <strong>position absolute</strong> to his parent and not the body since the parent is <strong>overflow: scroll;<strong><br>

How can I find those x and y conditions?

 </p>
  </article>
  
</main>

;

Jerdine sábio:

Boa pergunta, eu tive que voltar ao básico javascript. Felizmente, eu encontrei o key-- existem offsetTop, offsetLeftpropriedades!

Portanto, neste roteiro, em mousedown, estamos recebendo o local do evento, clique em seguida, subtrair a posição de deslocamento do elemento artigo.

A posição refere-se a compensar a distância que o elemento de alvo é desde o início do documento.

EDIT: Para lidar com a posição de deslocamento vertical no interior do artigo, adicionado article.scrollTopem computação.

Executar a demonstração abaixo.

const article = document.querySelector(`article`);

var x;
var y;

article.addEventListener('mousedown', function() {
  x = event.clientX;
  y = event.clientY;

  y = y - article.offsetTop + article.scrollTop - 5.5;
  x = x - article.offsetLeft + 1;
})

article.addEventListener('mouseup', function() {
  var result = window.getSelection().toString();
  const oldMark = document.querySelector(`.mark`);
  const body = document.querySelector(`body`);

  if (oldMark) {
    article.removeChild(oldMark);
  }
  window.getSelection().empty()
  if (result) {
    let mark = document.createElement('mark');
    mark.innerText = `${result}`;
    mark.classList.add('mark');
    mark.setAttribute("style", `top:${y}px; left:${x}px;`);
    article.appendChild(mark);
  }
});

main {
  display: flex;
  flex-direction: column;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

article {
  max-height: 50%;
  overflow: scroll;
  flex: 0 0 50vw;
  position: relative;
}

.mark {
  position: absolute;
  top: 50%;
  left: 50%;
}

<main>
  <article>

    <p>I'm trying to build something like the highlight feature in Medium.<br> The issue is that in the click event I need to add an element that will be in a <strong>position absolute</strong> to his parent and not the body since the parent is <strong>overflow: scroll;<strong><br>

How can I find those x and y conditions?

 </p>
          
    <p>I'm trying to build something like the highlight feature in Medium.<br>
The issue is that in the click event I need to add an element that will be in a <strong>position absolute</strong> to his parent and not the body since the parent is <strong>overflow: scroll;<strong><br>

How can I find those x and y conditions?

 </p>
          
    <p>I'm trying to build something like the highlight feature in Medium.<br>
The issue is that in the click event I need to add an element that will be in a <strong>position absolute</strong> to his parent and not the body since the parent is <strong>overflow: scroll;<strong><br>

How can I find those x and y conditions?

 </p>
  </article>
  
</main>