当前位置：首页 > article >正文

使用scroll-behavior属性实现页面平滑滚动的几个问题

article 2024/10/1 17:42:21

在较长的页面中，为了便于用户浏览，开发人员经常会使用锚点链接，锚点链接默认的效果是瞬间跳转，为了让用户体验更好，往往会添加滚动效果。我记得要实现滚动效果，以前一般是结合一段JavaScript代码来实现。
后来偶然知道了scroll-behavior: smooth;这个CSS属性，觉得用来实现滚动效果非常方便。
今天练习了一下这个属性，发现也不是用上就能滚动过的，需要用对，有以下几个问题：

1.scroll-behavior这个属性写在哪个CSS样式中。

我练习的案例中，运行效果如下：
在这里插入图片描述
代码如下：

<div class="box">
			<div class="left">
				<div class="main-box"><a id="lishi">历史沿革</a></div>
				<div class="main-box"><a id="banxue">办学条件</a></div>
				<div class="main-box"><a id="xueshu">学术研究</a></div>
				<div class="main-box"><a id="wenhua">文化传统</a></div>
				<div class="main-box"><a id="xiaoyuan">校园环境</a></div>
			</div>
			<div class="right">
				<a class="anchor" href="#lishi">历史沿革</a>
				<a class="anchor" href="#banxue">办学条件</a>
				<a class="anchor" href="#xueshu">学术研究</a>
				<a class="anchor" href="#wenhua">文化传统</a>
				<a class="anchor" href="#xiaoyuan">校园环境</a>
			</div>
</div>

点击.right右侧的各个条目，.left左侧会跳转到相应的位置。
在本例中，写css代码的时候，scroll-behavior: smooth;这句代码应该定义在.left中，而不应该定义在.main-box中，我理解的是，在哪个区域内滚动，就写在哪里。
2.还要定义父元素的高度
除了写scroll-behavior: smooth;有些属性不写，也不会滚动，在本例中，.left
的父元素.box,高度必须要设置，不一定非要是100%

			.box {
				height: 100%;      /*高度100%必须要写*/
				display: flex;
				overflow: hidden;
			}

3.需要设置根元素html、body的高度,html和body的高度都要设置，只设置其中一个也不行。

		html,body {
			position: relative; 
			height: 100%;      	/*高度100%必须要写*/
			overflow: hidden;
	   }

以上是我练习scroll-behavior: smooth;属性时发现的问题，若有不对之处，欢迎批评指正。完整代码如下：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>平滑滚动scroll-behavior</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			ul,
			li {
				list-style: none;
			}

			a {
				text-decoration: none;
			}

			a:hover {
				color: #ff8400
			}

			html,body {
				position: relative;  /*html和body都要定义*/
				height: 100%;      	/*高度100%必须要写*/
				overflow: hidden;
			}

			.box {
				height: 100%;       /*高度100%必须要写*/
				display: flex;
				overflow: hidden;
			}

			.right {
				width: 180px;
			}

			.right .anchor {
				display: block;
				width: 100%;
				line-height: 60px;
				text-align: center;
				font-size: 16px;
			}

			.left {
				width: calc(100% - 180px);
				overflow: auto;
				scroll-behavior: smooth;   /*在哪个范围内滚动，就在哪里加此条语句*/
			}

			.left .main-box {
				width: 100%;
				height: 500px;
				box-sizing: border-box;
				padding: 20px;
				border: 1px solid #23c6d9;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<div class="left">
				<div class="main-box"><a id="lishi">历史沿革</a></div>
				<div class="main-box"><a id="banxue">办学条件</a></div>
				<div class="main-box"><a id="xueshu">学术研究</a></div>
				<div class="main-box"><a id="wenhua">文化传统</a></div>
				<div class="main-box"><a id="xiaoyuan">校园环境</a></div>
			</div>
			<div class="right">
				<a class="anchor" href="#lishi">历史沿革</a>
				<a class="anchor" href="#banxue">办学条件</a>
				<a class="anchor" href="#xueshu">学术研究</a>
				<a class="anchor" href="#wenhua">文化传统</a>
				<a class="anchor" href="#xiaoyuan">校园环境</a>
			</div>
		</div>
	</body>
</html>