移动端 微信 网易 触屏滑动回弹菜单(css版)
总结一下:
有点:网易新闻,微信 热文 都是 -webkit-overflow-scrolling: touch;实现,css实现,轻巧;
bug: 部分安卓浏览器(uc,自带) 只支持持续滑动,不支持回弹,
iphone垂直滑动 第一次不能完全持续滑动到底部;总体不影响使用;
偶尔低端的手机会卡,适当 GPU hack;
iphone safari浏览器会出现滚动条,::-webkit-scrollbar {display: none;width:0}无效;
.slider_wrap::-webkit-scrollbar,.slider_wrap::scrollbar{ /*iphone safari 无效*/
display:none !important;width:0px; height:0; line-height:0; -webkit-appearance: none; background:transparent;overflow:hidden;
}
解决办法
父类 overflow-y:hidden 子类 padding-bottom:11px; /*iphone safari 去掉滚动条*/
其他
如果需要js版本的持续滑动菜单 ,请点击 淘宝 xscroll.js 基于kissy框架,
不懂kissy框架。如需独立的,里面找一下,有原生的js,不依赖库的 传送门 http://xscroll.github.io/ ,感觉功能却是完善,但这个组件的体积还是有点稍微大了;
原生独立的xscroll https://github.com/huxiaoqi567/xscroll/blob/master/build/standalone/xscroll.js
自己封装的移动端 触屏滑动条菜单(完善版) ,功能呵呵,能用,兼容没人淘宝的那么强大,也没那么多测试机器,win10触摸屏的不支持;
如果需要淘宝的 ,点击此处
附上css demo:
surface