banner

关于移动端上横向弹性滑动的误区

弹性滑动,这是一个基于移动端的特性,出现了一种交互效果。

通常,弹性滚动都是浏览器自带的动画交互,或者是写APP时的一些组件或插件。

mobile swipe

因为种种原因,导致我们在写移动端的时候,会用弹性滑动。多数情况下,我们首先考虑到是JS插件——iScroll。

是的,这是一款不错的插件,让很多开发者都很喜欢。

但这款插件的体积,确实很大。如果不是特别需求,我是不愿意添加一个如此庞大的JS插件到移动端。

我有考虑过,自己写一个简单的弹性滑动插件。好吧,弹性、加速度、惯性、回弹……一系列的物理问题迎面而来。一个当年物理没学好的骚年,看着这些东西,折腾半天后,还是懵逼的。。。

无奈之下,我一开始放弃了弹性滚动,利用touchstart和touchmove做了一个死板的滑动效果。直到今天,我无意间看到来自国外的一个网站手机版,发现他们用的横向弹性滑动非常棒。嗯,审查元素~

这时,我才明白,我走入了一个误区。一直以为弹性滑动要用JS插件来做,却忘了用最基本的overflow:scroll;。

是的,就是overflow:scroll;,虽然会出现滚动条,但可以把滚动条干掉啊!!!

.box {
    overflow-x:scroll;
}
.box::-webkit-scrollbar {
    display: none;
}

没错,就是-webkit-scrollbar这货,把滚动条干掉就行了。原生的弹性滑动,可比用JS写的流畅太多。

虽然使用-webkit-,可是绝大数移动端的浏览器,都是采用webkit内核的呀。

阅读: 10455
在同意共创许可协议(CC BY-NC-SA-4.0)的前提下,您可以转载本文。
橙色阳光
https://oss.so/article/70

相关阅读

留言评论

5条留言
方可
非常感谢,这种思维值得学习
卢松松商城
不错,顶一个
夏日博客
好像JS有事件可以直接实现滑动。
魏刚刚生活
js加载时间太长,作者的想法不错!
小小鸟
等等阳光大神的文章,已经快2个月了。尼玛,难得更新一次啊,哈哈!