数据结构
网络
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 浏览量
广告