Question

问题仅在移动浏览器（例如，Chrome for Android）上仍然存在

每当我滚动经过图像时，可滚动的div标签就会结巴/滞后，但是当我正文标签可滚动而不是div标签，问题消失了，但是我需要的是div可滚动。

滞后/卡住滚动div标签的示例代码：

<html lang="en">
    <head>
        <style>
              html, body {
                  width: 100%;
                  height: 100%;
                  margin: 0;
                  padding: 0;
                  overflow: hidden;
                  display: flex;
                  flex-direction: column;
              }

              .header {
                  padding: 20px;
                  border: 1px solid #505050;
              }

              .scrollable {
                  width: 100%;
                  height: 100%;
                  overflow-x: hidden;
                  overflow-y: auto;
                  border: 1px solid #505050;
              }

              .scrollable .item {
                  width: 50%;
                  margin: 50px auto;
                  height: 1000px;
                  border: 1px solid #2d2174;
              }
        </style>
    </head>

    <body>
        <div class="header"></div>

        <div class="scrollable">
            <div class="item">
              <!-- Img Here -->
            </div>
        </div>
    </body>
</html>

body标记可滚动时的示例代码（可解决滚动的延迟，但我需要div标记可滚动而不是body）：

<html lang="en">
    <head>
        <style>
              html, body {
                  width: 100%;
                  height: 100%;
                  margin: 0;
                  padding: 0;
                  overflow-x: hidden;
                  overflow-y: auto;
                  display: flex;
                  flex-direction: column;
              }

              .header {
                  padding: 20px;
                  border: 1px solid #505050;
              }

              .scrollable {
                  width: 100%;
                  height: auto;
                  border: 1px solid #505050;
              }

              .scrollable .item {
                  width: 50%;
                  margin: 50px auto;
                  height: 1000px;
                  border: 1px solid #2d2174;
              }
        </style>
    </head>

    <body>
        <div class="header"></div>

        <div class="scrollable">
            <div class="item">
               <!-- Img Here -->
            </div>
        </div>
    </body>
</html>

预先感谢！

在Android Chrome浏览器上滚动时，可滚动<div>不稳定/断断续续

0 个答案: