DeathGhost

CSS属性scroll-behavior定义浏览器滚动位置或跳转新位置行为

这篇文章发布于 2018年08月27日 22:32 星期一 阅读 397 次,评论 0 条

DeathGhost 编辑,归类于css »

scroll-behavior在CSS中的属性允许我们定义浏览器的滚动位置是否跳转到新位置,或者当用户点击指向滚动框内锚定位链接时的动画转换。即为一个滚动框指定滚动行为,其他任何的滚动,例如那些由于用户行为而产生的滚动,不受这个属性的影响。

页面中不论是移动端还是PC端,我们时常会碰到内容信息过长,同时都属于片段式的内容图文,让用户一直往下滑动,一定程度上影响用户体验;今天在这里我们看看CSS这个属性scroll-behavior,随着浏览器的不断更新,大部分新版浏览器均已支持,具体大家可以参考caniuse站点。

先看示例图:

CSS属性scroll-behavior示例图

操作中注意滚动框的高度设置(height:100px;),同时其溢出(overflow-y:scroll;)

看看其语法属性值:

.module {
  scroll-behavior: [ auto | smooth ];
}

scroll-behavior属性接受两个值,autosmooth

auto跳转的相对果断,而smooth相对委婉一点(正如其名),普遍情况我们当然选择smooth,具体根据情况而定。

在这里我将简单的demo代码也贴出来。

<body>
    <nav>
        <ul>
            <li><a href="#section-01">公司简介</a></li>
            <li><a href="#section-02">发展历史</a></li>
            <li><a href="#section-03">联系我们</a></li>
        </ul>
    </nav>
    <main>
        <section id="section-01">
            <h1>公司简介</h1>
            <p>公司简介信息</p>
        </section>
        <section id="section-02">
            <h1>发展历史</h1>
            <p>发展历史信息</p>
        </section>
        <section id="section-03">
            <h1>联系我们</h1>
            <p>联系我们信息</p>
        </section>
    </main>
</body>
*{font-family:'microsoft yahei';font-size:14px;box-sizing: border-box;}
h1{margin:0;font-size:18px;}
a{text-decoration: none;color:white;}
nav,main{width:640px;margin:0 auto;border:1px grey solid;margin-bottom:10px;}
nav{background:black;}
main{height:100px;overflow-y:scroll;scroll-behavior: smooth;}
nav ul{display:flex;list-style: none;margin:0;padding:0;}
nav ul li{flex:auto; text-align:center;font-weight:bold;height:45px;line-height:45px;}
section{height:100vh;padding:15px;background-color:lightgrey;color:white;}
section:nth-of-type(odd){background-color:grey;}
在任何媒介以任何形式复制、发行本作品。惟须遵守下列条件:
署名 — 您必须给出适当的署名,提供指向本许可协议的链接,同时标明是否(对原始作品)作了修改。您可以用任何合理的方式来署名,但是不得以任何方式暗示许可人为您或您的使用背书。
非商业性使用 — 您不得将本作品用于商业目的。
禁止演绎 — 如果您 再混合、转换、或者基于该作品创作,您不可以分发修改作品。

©️ DeathGhost 署名-非商业性使用-禁止演绎(CC BY-NC-ND)

用户评论(当前评论共计0条)

⚠️ 评论内容需要审核方可显示。
DeathGhost

孙志锋

视觉前端爱好者

志于道,据于德,依于仁,游于艺。

4

目录

33

文章

14

评论

世界品牌·洛川红富士

🙏 到访,就是一种鼓励,谢谢你的到访!🙏

💕与君共勉💕