better-scroll横向不滚动

短命女 2022-02-01 04:39 223阅读 0赞

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

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

display: inline-block;

这样就可以了

[better-scroll]: https://blog.csdn.net/zhaohanqq/article/details/84978100
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW9oYW5xcQ_size_16_color_FFFFFF_t_70]: /images/20220201/b70a9c0260ac4109ab392657b47310be.png

发表评论取消回复

表情：

评论列表（有 0 条评论，223人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp横向滚动

<template> <view> <scroll-view scroll-x="true" calss="scroll_view">

落日映苍穹つ/ 2023年01月11日 09:12/ 0 赞/ 257 阅读

相关公告栏横向滚动

<div class="gonggao"> <i class="icon iconfont icon-laba"></i> <marquee scr

偏执的太偏执、/ 2022年12月27日 12:51/ 0 赞/ 224 阅读

相关 html横向自动滚动代码,横向不间断滚动效果代码

完整DIV+CSS+JS不间断横向滚动代码：横向不间断滚动DIV .scroll\_div \{width:600px; height:49px;margin:0 aut

短命女/ 2022年10月05日 12:49/ 0 赞/ 359 阅读

相关 css 隐藏滚动条竖向y滚动，横向x不滚动

.bottom { overflow-x: hidden; overflow-y: scroll; } 参考博客：

左手的ㄟ右手/ 2022年09月09日 14:51/ 0 赞/ 256 阅读

相关 Android 横向列表GridView 实现横向滚动

[Android 横向列表GridView 实现横向滚动][Android _GridView] Android 横向列表实现，可左右滑动，如下图 ![05171621

浅浅的花香味﹌/ 2022年06月18日 02:15/ 0 赞/ 432 阅读

相关 RecyclerView实现横向滚动

Fruit Class public class Fruit { private int fruitImageId; //图片的ID

绝地灬酷狼/ 2022年06月11日 00:44/ 0 赞/ 300 阅读

相关移动端滚动插件 BetterScroll

BetterScroll 详细介绍 [BetterScroll][] 是一款重点解决移动端各种滚动场景需求的开源插件，适用于滚动列表、选择器、轮播图、索引列表、开屏引导等应用

落日映苍穹つ/ 2022年05月18日 09:41/ 0 赞/ 308 阅读

相关实现横向滚动并宽度不固定

摘要 > 前不久碰到一个需求，在宽度不固定下实现横线滚动，这里我用css来写，记录下来，供以后借鉴。有时会忘记原理子元素的宽度大于父元素是，会出现滚动 overf

一时失言乱红尘/ 2022年03月12日 07:56/ 0 赞/ 334 阅读

相关 better-scroll横向不滚动

之前写过better-scroll垂直滚动遇到的问题[better-scroll不滚动/连续两次触发点击事件等问题的解决][better-scroll] 现在要实现横向滚动

短命女/ 2022年02月01日 04:39/ 0 赞/ 224 阅读

相关 vue使用betterscroll解决滚动

本来的不加定位，不设置超出隐藏的时候，显示的是右侧滚动条，但是手机端的话，最好还是不用滚动条，所以用这个第三方来处理 1.执行命令安装:npm install bett

素颜马尾好姑娘i/ 2021年12月21日 07:49/ 0 赞/ 382 阅读