zoukankan      html  css  js  c++  java
  • 纯css实现移动端横向滑动列表

    前几天在公司做开发的时候碰到一个列表横向滑动的功能,当时用了iscroll做,结果导致手指触到列表的范围内竖向滑动屏幕滑动不了的问题。

    这个问题不知道iscroll本身能不能解决,当时选择了换一种方式来做,只要css就能搞定了,主要是利用了display:-webkit-box来实现。

    <!DOCTYPE html>
    <html>
    <head>
        <title>横向滑动</title>
        <style type="text/css">
            .slide-box{
                margin-top: 200px;
                display: -webkit-box;
                overflow-x: scroll;
                -webkit-overflow-scrolling:touch;
            }
            .slide-item{
                width: 200px;
                height: 200px;
                border:1px solid #ccc;
                margin-right: 30px;
            }
        </style>
    </head>
    <body>
        <div class="slide-box">
            <div class="slide-item"></div>
            <div class="slide-item"></div>
            <div class="slide-item"></div>
            <div class="slide-item"></div>
            <div class="slide-item"></div>
        </div>
    </body>
    </html>
  • 相关阅读:
    DP实验
    Linux shell学习
    线性排序算法-计数排序
    算法笔试题练习
    堆排序
    node.js初识
    linux下vim命令详解
    html5学习笔记
    有趣的参数收集
    算法学习-归并排序
  • 原文地址:https://www.cnblogs.com/minz/p/6435294.html
Copyright © 2011-2022 走看看