javascript - 带有和不带有滚动的元素会有所不同

Question

我有 2 个按钮，一个在顶部，另一个在底部。当我单击顶部按钮时，它工作正常。当我向下滚动到底部按钮并再次单击该按钮（相同的功能）时，它会将元素附加到某个位置。我正在从绝对方式计算最高位置。获得与身体的关系。

那么如何处理这种情况呢？

现场演示

JS代码：

const h1All = document.getElementsByTagName("h1");

function addElement() {
  let div = document.createElement('div');
  div.innerText = "I am here";
  div.style.border = "1px solid green";
  div.style.position = "absolute";
  let h1 = h1All[0];
  h1.style.border = "1px solid red";
  let parentPos =  h1.getBoundingClientRect();
  console.log(parentPos)
  document.body.appendChild(div);
  div.style.top = parentPos.y + parentPos.height + "px";
}

HTML：

 <h1>Hello Plunker!</h1>
    <div class="mydiv">some div info goes here
      <button onclick="addElement()">Click Me </button> //works fine.
    </div>
    <button onclick="addElement()">Click Me </button> //it's not. after scroll down!!

第二个按钮将元素附加到某个位置。我们必须在这里做的正确计算方法是什么？

提前致谢。

const h1All = document.getElementsByTagName("h1");

function addElement() {
  let div = document.createElement('div');
  div.innerText = "I am here";
  div.style.border = "1px solid green";
  div.style.position = "absolute";
  let h1 = h1All[0];
  h1.style.border = "1px solid red";
  let parentPos =  h1.getBoundingClientRect();

  document.body.appendChild(div);
  div.style.top = parentPos.y + parentPos.height + "px";
}

.mydiv{
  border: 1px solid green;
  height: 600px; 
}

 <h1>Hello Plunker!</h1>
    <div class="mydiv">some div info goes here
      <button onclick="addElement()">Click Me </button>
    </div>
    <button onclick="addElement()">Click Me </button>

标签： javascripthtml

Answer 1

如果要absolute定位，则需要考虑滚动。你可以用window.scrollY. 注意最后一行的变化addElement：

const h1All = document.getElementsByTagName("h1");

function addElement() {
  let div = document.createElement('div');
  div.innerText = "I am here";
  div.style.border = "1px solid green";
  div.style.position = "absolute";
  let h1 = h1All[0];
  h1.style.border = "1px solid red";
  let parentPos =  h1.getBoundingClientRect();

  document.body.appendChild(div);
  div.style.top = parentPos.y + parentPos.height + window.scrollY + "px";
}

.mydiv{
  border: 1px solid green;
  height: 600px; 
}

<h1>Hello Plunker!</h1>
    <div class="mydiv">some div info goes here
      <button onclick="addElement()">Click Me </button>
    </div>
    <button onclick="addElement()">Click Me </button>