首页 > 其他分享 >CSS实现滚动贴合效果

CSS实现滚动贴合效果

时间：2023-12-28 11:25:23浏览次数：30  
标签：滚动 background color section 贴合 main scroll CSS

一、滚动贴合介绍

滚动贴合：鼠标滚动的时候，自动贴合到浏览器的底部或顶部

设置CSS滚动贴合需要使用到两个属性：

1、给滚动容器设置scroll-snap-type，值为滚动的方向和方式

.container {
            /* display: flex; */
            /* 第一个值为滚动贴合的方向，y表示纵向滚动贴合，
            第二个值表示贴合方式，mandatory表示强制滚动 */
            scroll-snap-type: y mandatory;
        }

2、给滚动的内容设置scroll-snap-align，即滚动贴合的对齐方式，值为start、center、end

.child{
            /* 设置子元素的贴合对齐方式 */
            scroll-snap-align: center;
        }

二、未使用滚动贴合时的效果

使用之前代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        main {
            /* 需要把滚动条设置到直接父容器，
            scroll-snap-type才能生效，
            默认是再body上，现在是在main上 */
            overflow: scroll;
            height: 100vh;
        }
        section{
            width: 100vw;
            height: 100vh;
        }
        /* 给每个页面设置不同的颜色用于区分 */
        main > section:nth-child(1){
            background-color: #7f97ae;
        }
        main > section:nth-child(2){
            background-color: #c6b9a3;
        }
        main > section:nth-child(3){
            background-color: #bbcadc;
        }
        main > section:nth-child(4){
            background-color: #d7c6d9;
        }
        main > section:nth-child(5){
            background-color: #bfbea8;
        }
    </style>
</head>
<body>
    <main>
        <section>页面内容1</section>
        <section>页面内容2</section>
        <section>页面内容3</section>
        <section>页面内容4</section>
    </main>
</body>
</html>

效果如下：

发现用鼠标滚轮滚动时，页面不会自动贴合到浏览器的顶部或者底部

三、使用滚动贴合

假设我们有四屏的内容需要垂直滚动贴合，我们用main元素表示滚动的容器，四个section表示要滚动贴合的内容。

每个section都设置为占满全屏，即宽为100vw，高为100vh。

使用之后的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        main {
            /* 第一个值为滚动贴合的方向，y表示纵向滚动贴合，
            第二个值表示贴合方式，mandatory表示强制滚动 */
            scroll-snap-type: y mandatory;
            /* 需要把滚动条设置到直接父容器，
            scroll-snap-type才能生效，
            默认是再body上，现在是在main上 */
            overflow: scroll;
            height: 100vh;
        }
        section{
            width: 100vw;
            height: 100vh;
            /* 设置子元素的贴合对齐方式 start表示下一屏的内容会直接贴合到main元素的顶部*/
            scroll-snap-align: start;
        }
        /* 给每个页面设置不同的颜色用于区分 */
        main > section:nth-child(1){
            background-color: #7f97ae;
        }
        main > section:nth-child(2){
            background-color: #c6b9a3;
        }
        main > section:nth-child(3){
            background-color: #bbcadc;
        }
        main > section:nth-child(4){
            background-color: #d7c6d9;
        }
        main > section:nth-child(5){
            background-color: #bfbea8;
        }
    </style>
</head>
<body>
    <main>
        <section>页面内容1</section>
        <section>页面内容2</section>
        <section>页面内容3</section>
        <section>页面内容4</section>
    </main>
</body>
</html>

效果如下：

这样就实现了滚动贴合的效果

（1）、如果我们把section的高度加长为150vh，再把scroll-snap-align的属性设置为end，那么滚动的时候，下一屏内容的底部就会贴合到main元素的底部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        main {
            /* 第一个值为滚动贴合的方向，y表示纵向滚动贴合，
            第二个值表示贴合方式，mandatory表示强制滚动 */
            scroll-snap-type: y mandatory;
            /* 需要把滚动条设置到直接父容器，
            scroll-snap-type才能生效，
            默认是再body上，现在是在main上 */
            overflow: scroll;
            height: 100vh;
        }
        section{
            width: 100vw;
            height: 150vh;
            /* 设置子元素的贴合对齐方式 */
            scroll-snap-align: end;
        }
        /* 给每个页面设置不同的颜色用于区分 */
        main > section:nth-child(1){
            background-color: #7f97ae;
        }
        main > section:nth-child(2){
            background-color: #c6b9a3;
        }
        main > section:nth-child(3){
            background-color: #bbcadc;
        }
        main > section:nth-child(4){
            background-color: #d7c6d9;
        }
        main > section:nth-child(5){
            background-color: #bfbea8;
        }
    </style>
</head>
<body>
    <main>
        <section>页面内容1</section>
        <section>页面内容2</section>
        <section>页面内容3</section>
        <section>页面内容4</section>
    </main>
</body>
</html>

效果如下：

（2）、如果我们把section的高度加长为150vh，再把scroll-snap-align的属性设置为center，那么滚动的时候，下一屏内容就会和main元素垂直居中对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        main {
            /* display: flex; */
            /* 第一个值为滚动贴合的方向，y表示纵向滚动贴合，
            第二个值表示贴合方式，mandatory表示强制滚动 */
            scroll-snap-type: y mandatory;
            /* 需要把滚动条设置到直接父容器，
            scroll-snap-type才能生效，
            默认是再body上，现在是在main上 */
            overflow: scroll;
            height: 100vh;
        }
        section{
            width: 100vw;
            height: 150vh;
            /* 设置子元素的贴合对齐方式 */
            scroll-snap-align: center;
        }
        /* 给每个页面设置不同的颜色用于区分 */
        main > section:nth-child(1){
            background-color: #7f97ae;
            display: flex;
            justify-content: center;
            align-items: center;
            
        }
        main > section:nth-child(2){
            background-color: #c6b9a3;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        main > section:nth-child(3){
            background-color: #bbcadc;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        main > section:nth-child(4){
            background-color: #d7c6d9;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <main>
        <section>页面内容1</section>
        <section>页面内容2</section>
        <section>页面内容3</section>
        <section>页面内容4</section>
    </main>
</body>
</html>

效果如下：

四、水平滚动贴合

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        main {
            display: flex;
            /* 第一个值为滚动贴合的方向，y表示纵向滚动贴合，
            第二个值表示贴合方式，mandatory表示强制滚动 */
            scroll-snap-type: x mandatory;
            /* 需要把滚动条设置到直接父容器，
            scroll-snap-type才能生效，
            默认是再body上，现在是在main上 */
            overflow: scroll;
            width: 100vw;
            height: 100vh;
        }
        section{
            width: 100vw;
            height: 100vh;
            /* 设置子元素的贴合对齐方式 */
            scroll-snap-align: center;
            flex-shrink: 0;
        }
        /* 给每个页面设置不同的颜色用于区分 */
        main > section:nth-child(1){
            background-color: #7f97ae;
            display: flex;
            justify-content: center;
            align-items: center;
            
        }
        main > section:nth-child(2){
            background-color: #c6b9a3;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        main > section:nth-child(3){
            background-color: #bbcadc;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        main > section:nth-child(4){
            background-color: #d7c6d9;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <main>
        <section>页面内容1</section>
        <section>页面内容2</section>
        <section>页面内容3</section>
        <section>页面内容4</section>
    </main>
</body>
</html>

效果如下：

五、使用proximity小于一定距离的时候进行贴合

使用mandatory强制贴合的方式，适合内容尺寸较小的情况，如果有的元素内容非常长，那么在滚动的时候，会直接滑动到下一屏，导致不在屏幕上的内容很快就会滑过，这时候，我们可以把scroll-snap-type属性的第二个值改为proximity，这样让元素滚动到离贴合点小于一定距离的时候再进行贴合，这个距离是根据浏览器自己规定的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        main {
            /* 第一个值为滚动贴合的方向，y表示纵向滚动贴合，
            第二个值表示贴合方式，mandatory表示强制滚动 */
            scroll-snap-type: y proximity;
            /* 需要把滚动条设置到直接父容器，
            scroll-snap-type才能生效，
            默认是再body上，现在是在main上 */
            overflow: scroll;
            height: 100vh;
        }
        section{
            width: 100vw;
            height: 100vh;
            /* 设置子元素的贴合对齐方式 */
            scroll-snap-align: end;
        }
        /* 给每个页面设置不同的颜色用于区分 */
        main > section:nth-child(1){
            background-color: #7f97ae;
            display: flex;
            justify-content: center;
            align-items: center;
            
        }
        main > section:nth-child(2){
            background-color: #c6b9a3;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        main > section:nth-child(3){
            background-color: #bbcadc;
            height: 250vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        main > section:nth-child(4){
            background-color: #d7c6d9;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <main>
        <section>页面内容1</section>
        <section>页面内容2</section>
        <section>页面内容3</section>
        <section>页面内容4</section>
    </main>
</body>
</html>

效果如下：

六、设置sticky头部时的滚动贴合

在贴合的时候，我们还可以给容器设置间距，让贴合点偏离浏览器底部或顶部一些距离，当有一个position为sticky头部时，由于它占据了一定的空间，如果直接设置滚动贴合，那么元素会贴合到main元素的顶部，这样会有一部分内容被sticky头部覆盖，这种情况下我们可以给滚动的容器main元素设置scroll-padding，大小跟sticky头部的高度一致，这样就能在贴合的时候，与main元素有一定的间距，从而把头部的空间流出来。

scroll-padding和padding的取值方式是一样的，分别是上右下左

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        main {
            /* 第一个值为滚动贴合的方向，y表示纵向滚动贴合，
            第二个值表示贴合方式，mandatory表示强制滚动 */
            scroll-snap-type: y mandatory;
            scroll-padding: 80px;
            /* 需要把滚动条设置到直接父容器，
            scroll-snap-type才能生效，
            默认是再body上，现在是在main上 */
            overflow: scroll;
            height: 100vh;
        }
        h1{
            height: 80px;
            position: sticky;
            top: 0;
            background-color: red;
        }
        section{
            width: 100vw;
            height: 100vh;
            /* 设置子元素的贴合对齐方式 */
            scroll-snap-align: start;
        }
        /* 给每个页面设置不同的颜色用于区分 */
        main > section:nth-child(2){
            background-color: #7f97ae;
            
        }
        main > section:nth-child(3){
            background-color: #c6b9a3;
        }
        main > section:nth-child(4){
            background-color: #bbcadc;
        }
        main > section:nth-child(5){
            background-color: #663d69;
        }
    </style>
</head>
<body>
    <main>
        <h1>H1标题</h1>
        <section>页面内容1</section>
        <section>页面内容2</section>
        <section>页面内容3</section>
        <section>页面内容4</section>
    </main>
</body>
</html>

效果：

七、列表滚动

滚动贴合不仅仅可以用于全屏滚动，也可以用于ul这种小的列表滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        main {
            width: 100vw;
            height: 100vh;
            display: grid;
            place-items: center;
        }
        ul{
            width: 200px;
            height: 200px;
            scroll-snap-type: y mandatory;
            overflow-y:scroll;  /*只是y方向*/
            list-style: none;
            /* 隐藏x向滚动条 */
            overflow-x: hidden;
            
        }
        li{
            scroll-snap-align: start;
        }
        /* 给每个页面设置不同的颜色用于区分 */
        ul > li:nth-child(1){
            background-color: #7f97ae;
            width: 200px;
            height: 200px;
            
        }
        ul > li:nth-child(2){
            background-color: #c6b9a3;
            width: 200px;
            height: 200px;
        }
        ul > li:nth-child(3){
            background-color: #bbcadc;
            width: 200px;
            height: 200px;
        }
        ul > li:nth-child(4){
            background-color: #663d69;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <main>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </main>
</body>
</html>

效果如下：

 

标签：滚动,background,color,section,贴合,main,scroll,CSS
From： https://www.cnblogs.com/zwh0910/p/17932048.html

相关文章

  • css+jquery右下角弹框提示框（工作需要就开发调式了）
    使用时调用：addTip();setTimeout("closeTip();",1000);setTimeout("removeTip();",2000); //添加提示框functionaddTip(){vartip="<divid='tip'>"+"<divclass='tip-header'>提示......
  • css学习知识
    CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。CSS声明总是以分号;结束，声明总以大括号{}括起来。id选择器可以为标有特定id的HTML元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义。class选择器用于描述一组元素的样式，可......
  • Sublime Text Html CSS JS 代码整理美化插件
    原文地址：SublimeTextHtmlCSSJS代码整理美化插件使用代码编辑编辑器的好处就是有很多功能可以用，特别是一个就是代码整理优化。在编写代码时，我们经常会遇到代码混乱、缩进不正确或格式不统一等问题。这些问题可能会导致代码难以阅读、维护和调试，降低开发效率。那么我这里说一......
  • css+js瀑布流布局实现
    记录一个瀑布流布局问题的解决过程最开始使用js实现，将子元素进行绝对定位，根据宽高及顺序判断定位的top与left。问题：存在新增子元素页面加载不及时的问题，会出现子元素初始状态叠加在一起，计算完成后才能正常显示。点击查看代码window.onload=()=>{/*传入waterfall与pic......
  • 黑马pink css7
    定位的作用1：让盒子自由地在某个盒子内移动位置或者固定屏幕中的某个位置，并且可以压住其他盒子。定位=定位模式+边偏移定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。定位模式：position：static、relative、absolute、fixed静态定位static......
  • 纯CSS技术妙不可言，打造惊艳文字效果！
    哈喽！大家好！我是【程序视点】的小二哥。前言CSS是一门很特殊的语言，你认为CSS只能用来控制网页的结构与样式，但只要你有丰富的想象力，就能创造无限可能。本文中为你精选了10个使用纯CSS实现的文字炫酷效果，欣赏完之后一定要自己实现体验一番哦~一.渐变文字效果该效果主要利用backgr......
  • CSS之动画
    一.动画动画类型CSS3可以创建动画，它可以取代许多网页动画图像、Flash动画和JavaScript实现的效果。transform属性可以定义一些主要的动画属性，translate：平移，translat（100px），向右平移100pxscale：缩放，scale（120%），放大20%skew：阴影，skew（30deg），顺时针阴影30度rotate：旋转，rotate（30de......
  • 软件测试/测试开发|Python selenium CSS定位方法详解
    简介CSS选择器是一种用于选择HTML元素的模式。它允许我们根据元素的标签名、类名、ID、属性等属性进行选择。CSS选择器的语法简单而灵活，是前端开发中常用的定位元素的方式。selenium中的css定位，实际是通过css选择器来定位到具体元素，css选择器来自于css语法。CSS定位有以下显著......
  • iview 表格列自定义样式 & public.css 公共样式里面引用图片方式
    {title:'操作',key:'action',align:'center',renderHead:()=>{},//自定义表头样式className:'col_oper',width:120,render:(h,params)=&g......
  • css 禁止用户选择字体
    .className{-moz-user-select:none;/*火狐*/-webkit-user-select:none;/*webkit浏览器*/-ms-user-select:none;/*IE10*/-khtml-user-select:none;/*早期浏览器*/-webkit-touch-callout:none;user-select:none;} ......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99