当孩子的身高发生变化时浏览器出现意外滚动问题

问题描述 投票：0回答：1

demo

带包装盒

参见上图，我有一个带有包装纸的容器，其中包装了6个绿色的物品，高度为500px。首先，我让容器滚动到1000，这是第三项滚动到视口顶部。

然后单击small按钮，每次单击都会使项目高度减小。它从第一个开始，然后从第二个开始。

[结果是，首先单击small，第三项3仍然保持在顶部。我记录了scrollTop的container，它是600；

但是第二次单击small，第三项3将向上移动，并且第4项显示在视口中。 scrollTop的container是门槛600；

这是容器可滚动的情况，带有包装项目的包装器。附带代码。

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  .container {
    overflow: scroll;
    height: 200px;
  }
  .item {
    height: 500px;
    background: lime;
  }
  .small {
    height: 100px;
    background: lightblue;
  }
  .wrapper {
    border: 1px solid red;
    height: fit-content;
  }
</style>
<body>
  <div class="container">
    <div class="wrapper">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
    </div>
  </div> 
  <button id="insert">insert</button>
  <button id="add">append</button>
  <button id="remove">remove</button>
  <button id="shift">shift</button>
  <button id="shrike">shrike</button>
  <button id="small">small</button>

  <script>
    let count = 100;
    document.getElementsByClassName('container')[0].scrollTop = 1000
    document.getElementById('add').addEventListener('click',function() {
     const node =  document.createElement('div')
     node.className = 'item'
     node.innerText = count++;
     document.getElementsByClassName('wrapper')[0].appendChild(node)
    showScroll();
    })
    document.getElementById('insert').addEventListener('click',function() {
     const node =  document.createElement('div')
     node.className = 'item'
     node.innerText = count++;
      const firstEle = document.getElementsByClassName('item')[0];
     firstEle.parentNode.insertBefore(node, firstEle)
    showScroll();
    })
    document.getElementById('remove').addEventListener('click',function() {
     const node =  document.createElement('div')
     node.className = 'item'
     node.innerText = count++;
      const items = document.getElementsByClassName('item');
     document.getElementsByClassName('wrapper')[0].removeChild(items[items.length-1]);
    showScroll();
    })
    document.getElementById('shift').addEventListener('click',function() {
     const node =  document.createElement('div')
     node.className = 'item'
     node.innerText = count++;
     document.getElementsByClassName('wrapper')[0].removeChild(document.getElementsByClassName('item')[0]);
    showScroll();
    })
    document.getElementById('shrike').addEventListener('click',function() {
     const items = document.getElementsByClassName('item');
     Array.from(items).forEach(item => {
       item.classList.add('small')
     })
    showScroll();
    })

    document.getElementById('small').addEventListener('click',function() {
     const items = document.getElementsByClassName('item');
      items[0].classList = 'small'
    showScroll();
    })

    function showScroll() {
      console.log(document.getElementsByClassName('container')[0].scrollTop)
    }
  </script>

</body>
</html>

无包装盒

然后我尝试删除包装器：

 <div class="container">
    <div class="wrapper">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
    </div>
  </div>

更改为

 <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
  </div>

这次，结果是：首先单击small，将第三项3放在顶部。我记录scrollTop的container，它是600；

但是第二次单击small，第三项3仍然保持在顶部。 scrollTop的container为200；

问题困扰着我，是什么与众不同？任何线索将不胜感激。谢谢。

html css browser scrollbar
1个回答
0
投票

您设置了document.getElementsByClassName('container')[0].scrollTop = 1000。当container变短时，scrollTop仍设置为1000

您可以使用跟踪的count来调整scrollTop。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.