移动端 微信 网易 触屏滑动回弹菜单(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 
   


 
 
 
 
 
 





  
 
  

  
  
  
  
推荐
新闻
体育
娱乐
财经
亲子
推荐
新闻
体育
娱乐
财经
更多
+