移动端列表超出横向滑动，并隐藏滚动条

最新推荐文章于 2024-07-11 16:03:41 发布

一只懒羊羊

最新推荐文章于 2024-07-11 16:03:41 发布

阅读量3.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端问题总结文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_37585017/article/details/106221941

前端问题总结专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用CSS实现列表超出部分横向滚动并隐藏滚动条的方法，适用于不同浏览器，如谷歌、火狐和IE。通过调整ul元素的宽度和overflow属性，结合特定于浏览器的滚动条隐藏样式，可以实现平滑的滚动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

列表ul超出横向滑动，并隐藏滚动条

	使用组件多了，css的很多常用效果都忘记怎么写了，今天来记录下；
	列表超出横向滚动，并隐藏滚动条；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        overflow-x: auto;
        background-color: #fff;
    }

    /* // 谷歌浏览器 隐藏滚动条 */
    ul::-webkit-scrollbar {
        display: none;
    }

    /* // 火狐浏览器 隐藏滚动条 IE浏览器 隐藏滚动条 */
    ul {
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
    }

    ul {
        overflow-x: scroll;
        white-space: nowrap;
        /* ul的宽度一定要小于各个li宽度的和  否则看不到效果 /移动端只需要设置width：100% ，父元素也要设置100%，就没问题了*/
        width: 100%;
        /* width: 800px; */
    }

    li {
        display: inline-block;
        width: 100px;
        height: 30px;
        text-align: center;
        font-size: 20px;
        line-height: 30px;
        color: #f00;
        border: 2px solid red;
        font-weight: bold;
    }
</style>

<body>
    <div class="box">
        <ul class="ul">
            <li>首页</li>
            <li>电视剧</li>
            <li>电影</li>
            <li>综艺</li>
            <li>纪录片</li>
            <li>动漫</li>
            <li>美剧</li>
            <li>韩剧</li>
        </ul>
    </div>
    <br />
    <br />
    <button onclick="test()">向左移动</button>
    <script>
        function test() {
            let ul = document.getElementsByClassName('ul')[0];
            let li = document.getElementsByTagName('li')[0];
            let scrollX = ul.scrollLeft;
            console.log(ul,scrollX);
            ul.scrollTo(scrollX+30,0);
        }
    </script>
</body>

</html>