zoukankan      html  css  js  c++  java
  • 利用滚动条进行移动端水平滑动

    Question:

    (1)实现水平滑动

    (2)滚动条滚动,自动显示 li.active 项所在的位置

    <div class="scroll_hide">
    <div id="machine_box">
    <ul id="machine_list">
     <li class="machine_items">
    <p class="machine_no">A1</p>
            <p class="machine_ad">区域</p>
    </li>
    <!-- ……省略多个li标签 -->
    <li class="machine_items active">
    <p class="machine_no">A5</p>
    <p class="machine_ad">区域</p>
    </li>
    </ul>
    </div>
    </div>

    .scroll_hide {
            // 用来隐藏滚动条,盒子高度小于有滚动条的盒子高度,形成滚动条被隐藏的假象
    100%;
    height: 90px;
    overflow: hidden;
    }
    .machine_box {
    100%;
    height: 105px;
            // 横向滚动,纵向隐藏
    overflow-y: hidden;
    overflow-x: auto;
    position: relative;
            // 隐藏滚动条,经测验在ios的微信浏览器上无效,滚动条还会显示
    &::-webkit-scrollbar {
    display: none;
    }
    .machine_lists {
    height: 90px;
    1470px;
    .machine_items {
    position: relative;
    180px;
    height: 90px;
    float: left;
    margin-right: 30px;
    }
    }
    }

     var clientWidth=document.body.clientWidth||document.documentElement.clientWidth;
    var x = $("li.active").offset().left - $("li.active").width();
    // console.log($(window).width);
    console.log(clientWidth);
    console.log($("li.active").offset().left);
    console.log($("li.active").width());
    console.log(x);
    $("#machine_box").scrollLeft(x);

    var x = $(window).width - $("li.active").offset().left - $("li.active").width();
    $("#machine_box").scrollLeft(x);
    // 给可滚动元素的父元素添加scrollLeft()可以获取或者设置滚动条滚动的距离

  • 相关阅读:
    字符串提取数字/汉字/英文字母
    CHARINDEX,PATINDEX,STUFF函数
    raiserror的用法
    数据库备份与还原(通过命令)
    查询某个字段属于哪些表
    设备驱动基础1:设备模型之总线,驱动,设备
    设备模型之kobject,kset及其关系
    模拟电路创新设计
    cdev、udev
    PCB阻抗调节
  • 原文地址:https://www.cnblogs.com/itliulei/p/9969064.html
Copyright © 2011-2022 走看看