資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會研究
時尚研究
法律研究使用 CSS 停用滾動定位
若要停用網瀏覽器提供的預設滾動定位，我們可以使用 overflow-anchor 屬性。若要停用滾動定位，將 overflow-anchor 屬性設定為 none −
body {
overflow-anchor: none;
}
若要啟用滾動定位，將值設定為 auto，這也是預設值。但是，滾動定位行為在任何網瀏覽器中預設都是啟用的。
停用滾動定位
讓我們看一個停用滾動定位的示例 −
示例
<!DOCTYPE html>
<html>
<head>
<style>
body {
overflow-anchor: none;
}
div{
display: flex;
flex-direction: row;
}
</style>
</head>
<body>
<div>
<img src="https://images.unsplash.com/photo-1613061588991-6dd130548bc7?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb1.2.1&q=80&w=160" />
<img src="https://images.unsplash.com/photo-1612129717112-9d1274034547?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb1.2.1&q=80&w=160" />
<img src="https://images.unsplash.com/photo-1613079936591-8ce270890241?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb1.2.1&q=80&w=160" />
<img src="https://images.unsplash.com/photo-1612454902143-328050834c9e?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb1.2.1&q=80&w=160" />
</div>
<h2>Test overflow</h2>
</body>
</html>
為一個 div 停用滾動定位
讓我們看另一個示例，該示例將在單擊按鈕建立新框後向下推移文字以滾動 −
示例
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width: 320px;
aspect-ratio: 1;
padding: 3px;
border: dotted black 2px;
background-color: red;
overflow: scroll;
overflow-anchor: none;
}
.mydiv1{
background-color: blue;
width: 90%;
margin: 5px;
padding: 3px;
aspect-ratio: 4/1;
}
.mydiv2{
background-color: orange;
width: 70%;
margin: 5px;
padding: 3px;
aspect-ratio: 4/1;
}
</style>
</head>
<body>
<h3>Demo Text</h3>
<p>Click the buttons and create new boxes.</p>
<div id="box">
<div id="myBox"></div>
<h4>Click the button after scrolling down</h4>
<p>Sed a eros tellus. Cras et ex maximus, facilisis lacus nec, faucibus magna. Pellentesque accumsan ligula eu ex fermentum pharetra. Etiam pulvinar ipsum eu ullamcorper sodales. Cras mollis interdum dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla venenatis in ligula ut tempus.</p>
<p>Phasellus ullamcorper porta scelerisque. Sed nec tellus sed nisi cursus consequat placerat non velit. Morbi sed pharetra massa. In viverra porta lacus, eu congue purus auctor nec. Aliquam varius mauris eu nulla bibendum varius quis non justo. Donec semper risus ut leo aliquam rhoncus. Maecenas pretium aliquam odio. Donec varius hendrerit enim eget posuere. Cras eu ullamcorper nisi. Donec lacinia faucibus tellus, sollicitudin facilisis magna bibendum a. Fusce eu tortor elit. Curabitur et rhoncus massa.
</p>
<button onclick="newBox1()">Create a new blue box</button>
<p>Suspendisse laoreet lorem eget mauris condimentum aliquam. Vivamus quis aliquam elit, quis hendrerit lectus. Sed hendrerit at augue non pharetra. Vestibulum congue vehicula metus, vitae varius nisi tincidunt ac. Praesent in augue a mi ultricies porttitor quis quis nunc. Maecenas neque ligula, bibendum id hendrerit vel, pellentesque at orci. Donec in nisi non leo euismod blandit et a enim. Vestibulum vestibulum ante efficitur, euismod sapien eu, tincidunt ex. Duis vehicula, tellus id volutpat viverra, quam diam scelerisque neque, quis suscipit enim sem a dui. Proin pharetra in ligula id vulputate. Aliquam a pellentesque justo, non suscipit sapien. Curabitur a semper arcu.
</p>
<button onclick="newBox2()">Create a new orange box</button>
</div>
<script>
function newBox1(){
let newBoxesDiv = document.querySelector("#myBox");
let newDiv = document.createElement("div");
newDiv.className = "mydiv1";
newBoxesDiv.appendChild(newDiv);
}
function newBox2(){
let newBoxesDiv = document.querySelector("#myBox");
let newDiv = document.createElement("div");
newDiv.className = "mydiv2";
newBoxesDiv.appendChild(newDiv);
}
</script>
</body>
</html>
更新時間：01-11-2023
434 瀏覽量
廣告