better-scroll横向不滚动

最新推荐文章于 2024-05-11 06:52:18 发布

zhaohanqq

最新推荐文章于 2024-05-11 06:52:18 发布

阅读量777

点赞数 1

分类专栏： Library 文章标签： better-scroll横向滚动

本文链接：https://blog.csdn.net/zhaohanqq/article/details/90172861

版权

Library 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

之前写过better-scroll垂直滚动遇到的问题better-scroll不滚动/连续两次触发点击事件等问题的解决

现在要实现横向滚动

    <style>
        * {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .shop_raw_category {
            width: 200px;
            height: 40px;
            line-height: 1.08rem;
            overflow: hidden;
            font-size: 0.28rem;
            background-size: 100% 100%;
            margin-bottom: 0.05rem;
            position: relative;
            border: 0.2px solid black;
            margin: 200px 200px 200px;
        }

        .shop_raw_category>ul {
            border: 0.2px solid red;
            white-space: nowrap;
        }

        .shop_raw_category>ul>li {
            display: inline-block;
            text-align: center;
            padding: 0rem 0.2rem;
        }
    </style>
</head>


<body>

    <div class="shop_raw_category">
        <ul>
            <li>1111</li>
            <li>1111</li>
            <li>1111</li>
            <li>1111</li>
            <li>1111</li>
            <li>1111</li>
            <li>222</li>
            <li>1111</li>
            <li>22222</li>
            <li>1111</li>
            <li>2222</li>
            <li>2222</li>
            <li>1111</li>
            <li>1111</li>
            <li>1111</li>
            <li>1111</li>
            <li>1111</li>
            <li>1111</li>
            <li>1111</li>

        </ul>
    </div>
    <script src="https://cdn.bootcss.com/iScroll/5.2.0/iscroll.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(function () {
            var myScroll = new IScroll('.shop_raw_category', {
                scrollX: true,
                click: true
            });
            console.log(myScroll)
        })
    </script>

在这里插入图片描述
scrollerwidth和wrapperwidth相等，ul没有被li撑开，解决办法是在ul上增加css属性

display: inline-block;

这样就可以了

zhaohanqq

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
better-scroll横向不滚动

之前写过better-scroll垂直滚动遇到的问题better-scroll不滚动/连续两次触发点击事件等问题的解决现在要实现横向滚动 <style> * { list-style: none; margin: 0; padding: 0; } .sho...
复制链接

扫一扫