关闭

CSS让页面平滑滚动

时间: 2018-11-20阅读: 3573标签: 滚动

我们以往实现平滑滚动往往用的是jQuery, 如实现平滑回到顶部,就写如下代码

$(‘.js_go_to_top‘).click(function () {
    $(".js_scroll_area").animate({scrollTop: 0}, 600);
});


我们现在可能通过css实现这一功能了,只需要添加一句样式即可:

scroll-behavior:smooth

兼容情况可以点击这里查看

 

scroll-behavior的使用你就记住这么一句话——

凡是需要滚动的地方都加一句scroll-behavior:smooth就好了!


你别管他用不用得到,也不用管浏览器兼容性如何,你都加上。这就像一个不要钱的免费抽奖,没有中奖,没关系,又没什么损失,中奖了自然好,锦上添花!scroll-behavior:smooth就是这种尿性。

举个例子,在PC浏览器中,网页默认滚动是在<html>标签上的,移动端大多数在<body>标签上,业界浏览器的css reset都可以加上这么一条规则:

html, body { scroll-behavior:smooth; }



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1377

原生js获取浏览器获X轴,Y轴的滚动距离

在前端开发中,需要获取浏览器滚动距离的需求,这篇文章主要讲解如何使用原生Js兼容实现获取浏览器获X轴,Y轴的滚动距离。并延伸扩展下我们一些不知道的js知识,希望对你有所帮助。

页面平滑滚动小技巧

今天写需求的时候发现一个小的优化点:用户选择了一些数据之后, 对应列表中的数据需要高亮, 有时候列表很长, 为了提升用户体验,需要加个滚动, 自动滚动到目标位置。

JS 判断元素是否可以滚动

今天在解决 ios 移动端滚动穿透的问题时遇到一个问题,就是判断元素能否滚动,把这个过程记录下来。以下以纵向滚动为例,横向滚动同理。scrollHeight 是一个元素内容高度的度量,包括由于溢出导致的视图中不可见的内容

JS原生实现连续滚动文字

最近在工作中遇到,文字在大屏中,出现底部有留白导致不连续的现象,很奇怪,故写这篇文章细究其原因;offsetTop 小于等于 scrollTop时 scrollTop至为0,此次滚动条回到初始位置

原生js实现新闻无间歇性上下滚动【无间歇文字滚动】

这篇文章主要介绍使用js实现文字无间歇性上下滚动,一些网站的公告,新闻列表使用的比较多,感兴趣的小伙伴们可以参考一下 ,代码实现如下。

css隐藏滚动条_基于webkit内容隐藏滚动条的方法总汇

基于webkit内容隐藏滚动条,核心代码是:overflow的值需要设置为auto或者scroll,然后设置::-webkit-scrollbar的display属性为none。当然也可以通过设置滚动条的宽度为0。

H5中滚动到底部的事件

在H5中,我们有这样的需求:例如有列表的时候,滚动到底部时,需要加载更多。可以采用window的滚动事件进行处理,如果滚动是针对整个屏幕而言的(不针对于某个界面小块),那么这个应该是是成立的

css隐藏滚动条同时可以滚动

通过 ::-webkit-scrollbar 伪元素; 外层元素 overflow: hidden 内层元素absolute定位;父元素overflow: hidden, 子元素宽度 100% + 滚动条宽度

DOM盒模型和位置 client offset scroll 和滚动的关系

在dom里面有几个描述盒子位置信息的值,pading border margin,width height,client;盒模型生产环境一般使用 box-sizing: border-box,效果:width == content.width + pading + border

js实现返回顶部效果的方法总结

当页面特别长的时候,用户想回到页面顶部,必须得滚动好几次滚动键才能回到顶部,如果在页面右下角有个返回顶部的按钮,用户点击一下,就可以回到顶部,对于用户来说,是一个比较好的体验。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!