css实现滚动贴合效果

最新推荐文章于 2024-01-17 21:30:00 发布

新津之虎--曹达华

最新推荐文章于 2024-01-17 21:30:00 发布

阅读量475

点赞数 1

分类专栏：不懂就问系列 CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/Admin_yws/article/details/121163380

版权

不懂就问系列同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

直接分享代码

<!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>css实现滚动贴合效果</title>
		<style>
			body {
				overflow: hidden; //避免出现双滚动条
			}

			/* 核心样式 */
			main {
				scroll-snap-type: y mandatory;
				/* 需要把滚动条设置到直接父容器，
        scroll-snap-type 才能生效，
        默认是在 body 上，现在是 main 上 */
				overflow-y: scroll;
				overflow-x: hidden;
				height: 100vh;
			}

			section {
				width: 100vw;
				height: 100vh;
				scroll-snap-align: start;
				text-align: center;
				line-height: 100vh;
				font-size: 28px;
				background-color: antiquewhite;
			}
		</style>
	</head>
	<body>
		<main>
			<section>页面内容1</section>
			<section>页面内容2</section>
			<section>页面内容3</section>
			<section>页面内容4</section>
		</main>
	</body>
</html>

有帮助的话，动动小手点个赞吧

新津之虎--曹达华

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
css实现滚动贴合效果

直接分享代码<!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&
复制链接

扫一扫

专栏目录