CSS 参考手册在线编辑器 | CSS 参考手册代码测试

<!DOCTYPE html>
<html>
<head>
<style>
#container {
  width: 400px;
  aspect-ratio: 2/1;
  margin-top: 20px;
  padding: 5px;
  border: solid black 2px;
  overflow: scroll;
  overflow-anchor: auto;
}

#miniDivContainer{
  width: 50%;
}

.miniDiv{
  width: 10px;
  height: 10px;
  margin: 5px;
  border: solid black 1px;
  background-color: plum;
}
</style>
</head>
<body>

<h1>Change overflow-anchor property with JavaScript</h1>

<p>Scroll down to see how the browser strives to keep the same text in focus as new elements are added above.</p>

<p>Click button to set overflow-anchor to 'none'. Scroll anchoring is now turned off and the browser no longer strives to keep the same text in focus as new elements are added.</p>

<div id="container">
  <div id="miniDivContainer"></div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam hendrerit augue sit amet dictum rhoncus. Curabitur malesuada, tortor a fermentum pretium, lorem velit vulputate sapien, vitae laoreet est massa pretium metus. Pellentesque id metus eu risus pulvinar porttitor ac in est. Sed ultrices id augue et viverra. Vestibulum sem orci, ultricies a vulputate sed, pharetra ut quam. Nunc semper justo a nulla convallis, quis dapibus dui porta. Duis a rutrum dolor, sit amet convallis mi. Sed ac rutrum nulla, et dignissim libero. Morbi tempus felis sed laoreet tristique. Cras eu eleifend urna. Donec ante dui, ultricies eget lobortis et, pretium in velit. Vivamus fringilla ligula ante, at gravida risus molestie id. Donec hendrerit est ut leo feugiat, et efficitur justo mollis. Donec porttitor pellentesque libero. Nunc placerat ipsum in mi venenatis vestibulum.</p>
  <p>Praesent commodo nisl quis condimentum eleifend. Etiam at diam sed nulla hendrerit semper vel et justo. Aliquam dapibus venenatis felis. Vivamus congue nunc eu eleifend semper. Proin fringilla ut lacus eu viverra. Mauris eget nibh tristique metus tincidunt commodo eu in neque. Praesent sed urna eleifend, gravida ipsum sed, auctor metus.</p>
  <p>Curabitur efficitur ullamcorper lectus a eleifend. Pellentesque viverra leo nec eros maximus, id mollis dui sagittis. Cras tempus felis ut efficitur posuere. Aenean id ornare sapien. Sed luctus augue porta lorem suscipit, at elementum mauris congue. Aliquam a velit quis odio congue ultrices. Nam ut ornare est. Pellentesque augue diam, tincidunt sed nibh in, pharetra bibendum neque. Donec eleifend odio at est cursus, vulputate dapibus enim aliquam. Nulla ac auctor ex, sed fringilla leo. In placerat velit lacus, quis consectetur lacus porta eleifend. Vestibulum aliquam leo vitae laoreet convallis. Aliquam eu facilisis ex. Phasellus tincidunt mi in sapien suscipit dapibus.</p>
</div>

setInterval(function(){
    let newMiniDiv = document.createElement("div");
    newMiniDiv.className = "miniDiv";
    miniDivContainerEl.appendChild(newMiniDiv);
  },300);

function myFunction() {
    let containerDiv = document.querySelector("#container");
    containerDiv.style.overflowAnchor = "none";
  }
</script>

</body>
</html>