文章关键字 ‘scroll-behavior’

介绍8个和滚动相关的CSS属性

2022年03月7日,星期一

滚滚封面图

介绍与滚动相关的8个CSS新特性,相信里面一定有很多属性你并不认识,是第一次见,这些属性非常有助于提高用户体验。

阅读全文…

还有完没完,怎么又来了个 scrollbar-gutter?

2022年01月12日,星期三

占位图 猫猫

一不留神,又冒出个新的CSS属性scrollbar-gutter,一研究,发现还挺实用,赶快和大家分享分享。

阅读全文…

CSS overflow-anchor属性与滚动锚定

2020年08月12日,星期三

小鱼儿占位图

带大家了解下滚动锚定概念以及对应overflow-anchor属性的作用和特性,虽然不是常用CSS,但是,关键时候说不定就救命了。

阅读全文…

CSS overscroll-behavior让滚动嵌套时父滚动不触发

2020年01月5日,星期日

小鱼儿占位图

要实现窗体不跟着子元素滚动的交互效果,有专门的CSS – overscroll-behavior,本文就通过真实案例,配合精心制作的GIF介绍这个CSS新特性,快来学习吧,说不定第二天就能在实际项目中使用咯。

阅读全文…

还算有点用的scrollTo和scrollBy两个JS API

2019年07月27日,星期六

封面占位图

本文介绍两个与滚动相关的新的API,scrollTo和scrollBy,知识整理下来一看,还算有点用。

阅读全文…

使用document.scrollingElement控制窗体滚动高度

2019年02月22日,星期五

介绍一个更加兼容、更加标准的设置窗体滚动高度的方法,那就是document.scrollingElement,兼容性足矣在实际项目中应用。JS基础API,人人必须了解的特性,学到就是赚到。

阅读全文…

大侠,请留步,要不过来了解下CSS Scroll Snap?

2018年11月28日,星期三

scroll snap头图

CSS Scroll Snap是CSS中一个独立的模块,可以让网页容器滚动停止的时候,自动平滑定位到指定元素的指定位置。虽然Scroll Snap最后的定位效果是平滑的,但是Scroll Snap的作用不是平滑滚动,而是元素定位增强。要想实现平滑滚动,请使用CSS scroll-behavior属性

阅读全文…

CSS scroll-behavior和JS scrollIntoView让页面滚动平滑

2018年10月21日,星期日

浏览器原生平滑滚动缩略图

从去年年底开始,浏览器已经开始支持的原生平滑滚动定位,CSS scroll-behavior属性和JS scrollIntoView()方法都可以。本文就将捋一捋这些平滑滚动新特性的使用方法,实际效果,以及如何在实际中应用等。一如既往,丰富配图,含GIF演示和视频截屏,必要的源代码展示和详尽的demo,希望本文内容能够对您的学习有所帮助。

阅读全文…