zoukankan      html  css  js  c++  java
  • 移动端 微信 网易 触屏滑动回弹菜单(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>
    

      

  • 相关阅读:
    10. Regular Expression Matching
    9. Palindrome Number (考虑负数的情况)
    8. String to Integer (整数的溢出)
    7. Reverse Integer (整数的溢出)
    LeetCode Minimum Size Subarray Sum
    LeetCode Course Schedule II
    Linux 文件缓存 (一)
    LeetCode Tries Prefix Tree
    Linux : lsof 命令
    LeetCode Binary Tree Right Side View
  • 原文地址:https://www.cnblogs.com/surfaces/p/5231236.html
Copyright © 2011-2022 走看看