关于css中的那些scroll

栏目: CSS · 发布时间: 6年前

内容简介:说到css中的scroll,我们最先想到的应该是overflow:scroll。想到这个scroll之后,自然而然又想到了浏览器的滚动轴。说到浏览器的滚动轴,mac和window显示各异,不同浏览器也显示不同。早起也有一些js的解决方案。例如:控制滚动轴的7个伪元素分别是:具体案例可以看见我之前的文章。

一、滚动轴scrollbar

说到css中的scroll,我们最先想到的应该是overflow:scroll。想到这个scroll之后,自然而然又想到了浏览器的滚动轴。说到浏览器的滚动轴,mac和window显示各异,不同浏览器也显示不同。早起也有一些js的解决方案。例如: jScrollPanetinyscrollbar 等等。后来, 谷歌浏览器支持滚动轴的修改 ,我之前也有文章: https://www.haorooms.com/post/CSS_selections

控制滚动轴的7个伪元素分别是:

::-webkit-scrollbar:整个滚动条
::-webkit-scrollbar-button:滚动条上的按钮(下下箭头)
::-webkit-scrollbar-thumb:滚动条上的滚动滑块
::-webkit-scrollbar-track:滚动条轨道
::-webkit-scrollbar-track-piece:滚动条没有滑块的轨道部分
::-webkit-scrollbar-corner:当同时有垂直和水平滚动条时交汇的部分
::-webkit-resizer:某些元素的交汇部分的部分样式(类似textarea的可拖动按钮)

具体案例可以看见我之前的文章。

二、scroll-behavior

有如下2个属性

/* Keyword values */
scroll-behavior: auto;
scroll-behavior: smooth;

有了这个属性,可以让我们的滚动更加平滑。

例如,原来的返回到顶部还要用js实现,现在仅仅用css就可以实现,代码如下:

<a href="#">返回顶部</a>

html, body { scroll-behavior:smooth; }

我们可以直接在html,或者body中添加如下:

html, body { scroll-behavior:smooth; }

类似把这段代码放到base.css中,凡是支持这个属性的,都会自动加上平滑滚动的效果。

纯css的tab切换,加上了scroll-behavior:smooth;可以实现动画的效果,如下:

三、Scroll Snap

CSS Scroll Snap是CSS中一个独立的模块,可以让网页容器滚动停止的时候,自动平滑定位到指定元素的指定位置,包含scroll- 以及scroll-snap- 等诸多CSS属性。

/* Keyword values */
scroll-snap-type: none;
scroll-snap-type: x;
scroll-snap-type: y;
scroll-snap-type: block;
scroll-snap-type: inline;
scroll-snap-type: both;

/* Optional mandatory | proximity*/
scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;
scroll-snap-type: both mandatory;

演示效果如下:


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Algorithms and Data Structures

Algorithms and Data Structures

Kurt Mehlhorn、Peter Sanders / Springer / 2008-08-06 / USD 49.95

Algorithms are at the heart of every nontrivial computer application, and algorithmics is a modern and active area of computer science. Every computer scientist and every professional programmer shoul......一起来看看 《Algorithms and Data Structures》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试