overflow-anchor值效果对比实例页面

展示

代码

• HTML：

  <div class="on">
    <h2>overflow-anchor: auto;</h2>
    <p>记得上小学那会儿...</p>
  </div>
  
  <div class="off">
    <h2>overflow-anchor: none;</h2>
    <p>记得上小学那会儿...</p>
  </div>

• CSS：

  .on {
      overflow-anchor: auto;
  }
  .off {
      overflow-anchor: none;
  }
  div {
      width: 320px;
      max-width: 100%;
      height: 400px;
      overflow-x: hidden;
  }
  .thing {
      height: 100px;
      background: green;
      display: grid;
      place-items: center;
      color: white;
  }
  .thing::before {
      content: '临时插入内容';
  }

• JS：

  var addBox = function (event) {
      var target = event.target;
      console.log('srcoll');
      setTimeout(function() {
          var newNode = document.createElement("div");
          newNode.classList.add("thing");
          var p = target.querySelector("p");
          target.insertBefore(newNode, p);
          target.removeEventListener("scroll", addBox, false);
      }, 1000);
  };
  
  document.querySelector("div").addEventListener("scroll", addBox, false);