滑动导航栏

最新推荐文章于 2021-05-27 09:19:33 发布

抑制、

最新推荐文章于 2021-05-27 09:19:33 发布

阅读量449

点赞数 1

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/qq_43486347/article/details/92422932

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML

<!DOCTYPE html>
<html>
<head>
    <title>横向滑动</title>
    <style type="text/css">
        .slide-box{
        	//要有足够宽度
         	width: 150%;
            height:35px;
            display: flex;
            // 强制加一个滚动条
            overflow-x: scroll;
            // 属性控制元素在移动设备上是否使用滚动回弹效果.
            // auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。
			// touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效		果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。
			// 在移动端上，在你用overflow-y:scorll属性的时候，你会发现滚动的效果很木，很慢，这时候可以使用-webkit-overflow-scrolling:touch这个属性，让滚动条产生滚动回弹的效果，就像ios原生的滚动条一样流畅。
            -webkit-overflow-scrolling:touch;
        }
        // 滚动条隐藏
        ::-webkit-scrollbar {    
        	width: 0px;
        }
        .slide-item{
           	width:25%;
            height: 35px;
        }
    </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>