better-scroll横向不滚动

之前写过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>

better-scroll横向不滚动
scrollerwidth和wrapperwidth相等，ul没有被li撑开，解决办法是在ul上增加css属性

display: inline-block;

这样就可以了

better-scroll横向不滚动

相关推荐