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


     总结一下:

      有点:网易新闻,微信 热文 都是 -webkit-overflow-scrolling: touch;实现,css实现,轻巧;

      bug: 部分安卓浏览器(uc,自带)  只支持持续滑动,不支持回弹,

                iphone垂直滑动 第一次不能完全持续滑动到底部;总体不影响使用;

                偶尔低端的手机会卡,适当 GPU hack;

                iphone safari浏览器会出现滚动条,::-webkit-scrollbar {display: none;0}无效;

    .slider_wrap::-webkit-scrollbar,.slider_wrap::scrollbar{  /*iphone safari 无效*/
    display:none !important;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:

    <!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;
     85%;
    /* -webkit-overflow-scrolling: touch;  js 添加  */
    -webkit-transform: translateZ(0px);transform: translateZ(0px); backface-visibility:hidden;}
    
    
    #slider_wrap::-webkit-scrollbar{
    display:none; 0px; -webkit-appearance: none; 
    }
    
    
    .u_c_items {
    white-space: nowrap; height:40px;/*display: -webkit-box;*/
    }
    
    .item_cell {
    display: inline-block;
    height: 40px;
     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 {
     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;
     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="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>
    

      

  • 相关阅读:
    np.clip()的用法
    np.random.RandomState(123)
    torch.utils.data.DataLoader用法及各参数含义
    source 1.7 中不支持 lambda 表达式(请使用 -source 8 或更高版本以启用 lambda 表达式)
    tensorflow note
    tensorflow-gpu install check
    python3 yum not found
    Python打包成exe,pyc
    windows定时执行python脚本
    docker guide
  • 原文地址:https://www.cnblogs.com/surfaces/p/5231236.html
Copyright © 2020-2023  润新知