移动端 微信 网易 触屏滑动回弹菜单(css版)

移动端  微信 网易  触屏滑动回弹菜单(css版)

移动端  微信 网易  触屏滑动回弹菜单(css版)

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

移动端  微信 网易  触屏滑动回弹菜单(css版)

不懂kissy框架。如需独立的,里面找一下,有原生的js,不依赖库的  传送门 http://xscroll.github.io/ ,感觉功能却是完善,但这个组件的体积还是有点稍微大了;

原生独立的xscroll   https://github.com/huxiaoqi567/xscroll/blob/master/build/standalone/xscroll.js

移动端  微信 网易  触屏滑动回弹菜单(css版)

自己封装的移动端 触屏滑动条菜单(完善版) ,功能呵呵,能用,兼容没人淘宝的那么强大,也没那么多测试机器,win10触摸屏的不支持;

如果需要淘宝的 ,点击此处

附上css demo:

<!DOCTYPE html>
<html>
<head>
<title>surface</title>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" /> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0"> <meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="email=no" >
<meta name="apple-mobile-web-app-title" content="">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
</head>
<body> <script> document.body.addEventListener('touchstart', function () { }); </script>
<style>
*{ margin:0; padding:0;}
ul,li{ list-style:none;} ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb:horizontal {/*当焦点不在当前区域滑块的状态*/
background:#FF0;
} .slider_wrap {
height:40px; line-height:40px;
padding-bottom:11px; /*iphone safari 去掉滚动条*/
overflow-x: scroll;
overflow-y:hidden;
width: 85%;
/* -webkit-overflow-scrolling: touch; js 添加 */
-webkit-transform: translateZ(0px);transform: translateZ(0px); backface-visibility:hidden;} #slider_wrap::-webkit-scrollbar{
display:none; width:0px; -webkit-appearance: none;
} .u_c_items {
white-space: nowrap; height:40px;/*display: -webkit-box;*/
} .item_cell {
display: inline-block;
height: 40px;
width: 16.6666%;
overflow: hidden;
position: relative;
} .u_c_items span {
color: #555;
line-height: 40px;
white-space: nowrap;
display: block;
-webkit-tap-highlight-color: rgba(0,0,0,0);
text-align: center;
cursor: pointer;
} .u_c_more {
width: 15%; background:#666; color:#fff; z-index:5; font-size:22px;
height: 40px;
line-height: 40px;
text-align: center;
position: absolute;
bottom: 0;
right: 0;
} .qb_ns-float-menus-mask {
position: fixed;
z-index: 0;
top: 40px;
left: 0;
width: 100%;
height: 100%;
background: rgba(30,30,30,0.5);-webkit-transition: opacity .2s;
transition: opacity .2s;
opacity: 0;
pointer-events: none;
} .qb_ns-float-menus-mask.qb_show {
opacity: 1;
pointer-events: auto;
z-index: 190;
}
</style> <div style="width:98%; margin:0 auto; height:40px;border:1px solid red; position:relative; display:block; overflow-y:hidden;">
<div class="slider_wrap " id="slider_wrap">
<div class="u_c_items" id="j_u_c_items">
<div class="item_cell current" scroll-left="0" data-child="all" data-cnn="all"><span data-href="#/all">推荐</span></div>
<div class="item_cell" scroll-left="0" data-child="all" data-cnn="news"><span data-href="#/news">新闻</span></div>
<div class="item_cell" scroll-left="0" data-child="all" data-cnn="sports"><span data-href="#/sports">体育</span></div>
<div class="item_cell" scroll-left="45" data-child="all" data-cnn="ent"><span data-href="#/ent">娱乐</span></div>
<div class="item_cell" scroll-left="91" data-child="all" data-cnn="money"><span data-href="#/money">财经</span></div>
<div class="item_cell" scroll-left="777" data-child="all" data-cnn="baby"><span data-href="#/baby">亲子</span></div>
<div class="item_cell current" scroll-left="0" data-child="all" data-cnn="all"><span data-href="#/all">推荐</span></div>
<div class="item_cell" scroll-left="0" data-child="all" data-cnn="news"><span data-href="#/news">新闻</span></div>
<div class="item_cell" scroll-left="0" data-child="all" data-cnn="sports"><span data-href="#/sports">体育</span></div>
<div class="item_cell" scroll-left="45" data-child="all" data-cnn="ent"><span data-href="#/ent">娱乐</span></div>
<div class="item_cell" scroll-left="91" data-child="all" data-cnn="money"><span data-href="#/money">财经</span></div>
<div class="item_cell" scroll-left="777" data-child="all" data-cnn="navall"><span data-href="http://3g.163.com/touch/navigation/">更多</span></div>
</div>
</div>
<div class="u_c_more">
<span class="more_channel up ">+</span>
</div>
</div> <div class="qb_ns-float-menus-mask "> </div> <script>
document.getElementById('slider_wrap').style.webkitOverflowScrolling = 'touch'; //js 添加 防止开始卡死
document.getElementById("j_u_c_items").addEventListener('touchstart', function(event){});//ios7 促发 var u_c_more=document.querySelector(".u_c_more").addEventListener("click",function(){
document.querySelector(".qb_ns-float-menus-mask").classList.toggle('qb_show'); });;
</script>
</body>
</html>

  

上一篇:推荐几个精致的web UI框架及常用前端UI框架


下一篇:【C++】三大概念要分清--重载,隐藏(重定义,覆盖(重写)