用css巧妙实现移动端横向滑动展示功能

公司需要做一个手机横向滑动的效果,不想用js插件,太麻烦,导入代码也多。所以去网上找了一下,用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-box::-webkit-scrollbar{
            width:0; 
            height:0; 
            display: none;
        }
        .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>

猜你喜欢

转载自blog.csdn.net/qq_29207823/article/details/81514787