身体滚动意外地移动

问题描述

这是视频。 https://www.youtube.com/watch?v=l8pzl53p_TQ

<!DOCTYPE html>
<html lang="ko">
<head>
  <Meta name="viewport" content="width=device-width,initial-scale=1"/>
  <Meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      Box-sizing: border-Box;
    }

    body {
      background-color: darkblue;
      height: 150vh;
    }

    #container {
      margin: 100px 0 0 100px;
      padding: 10px;
      width: 400px;
      height: 400px;
      overflow-y: scroll;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: yellow;
    }

    .item {
      width: 300px;
      height: 40px;
      background-color: red;
      margin-bottom: 10px;
      flex-shrink: 0;
    }
  </style>
</head>
<body>
<div id="container">
</div>
<script>

  setInterval(() => {
    appendNewItem();
  },500);

  function appendNewItem() {
    const containerDom = document.getElementById('container');
    const appendDom = document.createElement('div');
    const firstChild = containerDom.children[0];
    appendDom.className = 'item';
    containerDom.insertBefore(appendDom,firstChild);
  }
</script>
</body>
</html>

如果仅稍微降低正文滚动条以使列表的顶部不可见，则根据列表动画，正文滚动条将以意外的方向移动。

我不知道为什么会这样。我不知道此错误的原因，也不知道如何解决它。请回复。

解决方法

这可能是浏览器的错误，或者不是错误，因为浏览器会尝试滚动视图以提示用户插入了某物。

此“ bug”在chrome和firefox上运行良好，有一个黑客方法：

const temp = document.documentElement.scrollTop; // new line
containerDom.insertBefore(appendDom,firstChild);
document.documentElement.scrollTop = temp; // new line

codesandbox

好吧，您需要在容器中插入if let vc = self.storyboard?.instantiateViewController(identifier: "CapturedPhotoViewController") as? CapturedPhotoViewController { vc.images.append(pickedIMG) self.navigationController?.pushViewController(vc,animated: true) vc.imgCollectionView.reloadData() }，并且由于该项目只是一个div，因此您无需使用overflow-y: scroll ;

display : flex;

html javascript scrollbar