html scroll css,关于css中的那些scroll

一、滚动轴scrollbar

说到css中的scroll，我们最先想到的应该是overflow:scroll。想到这个scroll之后，自然而然又想到了浏览器的滚动轴。说到浏览器的滚动轴，mac和window显示各异，不同浏览器也显示不同。早起也有一些js的解决方案。例如：jScrollPane、tinyscrollbar等等。后来，谷歌浏览器支持滚动轴的修改，我之前也有文章：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就可以实现，代码如下：

返回顶部

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;

演示效果如下：

小结

css各种优化体验不断升级。越来越可以做一些js做的事情了。可以适当体验一下！