两个div之间的滚动延迟问题

时间:2019-05-06 15:53:26

标签: javascript html css

我写了一些伪代码来解释这个问题。仅在使用鼠标而不是触摸板时才会出现此问题。如果将鼠标指针移到左侧的div并快速向下滚动到div的底部,则会遇到延迟,直到浏览器将滚动焦点更改为下一个div或正文。这个问题有什么解决办法吗?已经尝试过Scrollintoview()并没有帮助。 我正在使用Chrome和Firefox

 body {
      height: 3000px;
      overflow:auto;
    }
    .container {
      height: 1000px;
      width:100%;
      overflow:scroll;
      background:cadetblue;
    }
    .left {
      height:2500px;
      background: bisque;
      width:50%;
      float:left;
      overflow:scroll;
    }
    .right {
      height: 1000px;
      width:50%;
      background:aqua;
      float:right;
    }

    .section {
      background:cornflowerblue;
      width:300px;
    }
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div class="container">
      <div class="left">
        Images
      <div class="right">
        TEXT
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
  </div>
  <div class="section">
    NEXT section
  </div>
  </body>
</html>

0 个答案:

没有答案