scroll 横向区域滚动，应该怎么使用？

分类：MUI

scroll

HTML我是这么写的，使用的 li 元素

<div class="mui-scroll-wrapper" style="height: 500px; width: 300px; background-color: #2AC845;">  
            <div class="mui-scroll">  
                <!--这里放置真实显示的DOM内容-->  
                <ul style="width: 3000px;">  

                </ul>  
            </div>  
        </div>  
        <script type="text/javascript">  
            mui('.mui-scroll-wrapper').scroll({  
                deceleration: 0.0005, //flick 减速系数，  
                scrollY:false,  
                scrollX:true  

            });  
            for (var i = 0 ;i < 100 ; i++) {  
                $("ul").append("<li style='float:left;'>"+i+"</li>")  
            }  

        </script>

没有实现左右滚动，理论上左右滚动的需求应该也不少，为什么我都没有找到相关的说明。看MUI的源码，应该是支持左右滚动的，但是怎么实现呢？

2016-05-25 15:20 负责人:无分享

5 个回复

灵台山大长老 (作者)

其他的实现方式

            .wrap {  
                width: 100%;  
                height: 160px;  
                overflow-x: scroll;  
                overflow-y: hidden;  
            }  

            .wrap::-webkit-scrollbar {  
                opacity: 0;  
            }  

            .wrap > ul {  
                width: 20000px;  
            }  

            .wrap > ul > li {  
                float: left;  
                margin-right: 20px;  
                width: 100px;  
                height: 140px;  
            }

这种方式能够实现上下或者左右的滚动，但是有个问题是滑动到最后的间距不起作用，意思就是滑动到最后，是紧贴着父元素的，不管margin、padding

DCloud_UNI_FXY

@DCloud_MUI_果汁

BoredApe - 有问题就会有答案。

可以在mui区域滚动基础上做修改实现;

.mui-scroll-wrapper{  
            height: 38px;  
        }  
        .mui-scroll{  
            width: auto;  
        }  
        .ttt>a{  
            display: inline-block;  
            padding: 5px 11px;  
        }  
        .ttt{  
            white-space: nowrap;  
        }

<div class="mui-scroll-wrapper">  
        <div class="mui-scroll">  
            <div class="ttt">  
                <a href="#">1菜单1</a>  
                    <a href="#">1菜单1</a>  
                    <a href="#">1菜单1</a>  
                    <a href="#">1菜单1</a>  
                    <a href="#">1菜单1</a>  
                    <a href="#">1菜单1</a>  
                    <a href="#">1菜单1</a>  
                    <a href="#">1菜单1</a>  
                    <a href="#">1菜单1</a>  
                    <a href="#">1菜单1</a>  
                    <a href="#">1菜单1</a>  
                    <a href="#">1菜单1</a>  
                    <a href="#">1菜单1</a>  
                    <a href="#">1菜单1</a>  
                    <a href="#">1菜单1</a>  
                    <a href="#">1菜单1</a>  
                    <a href="#">1菜单1</a>  
                    <a href="#">1菜单1</a>  
                    <a href="#">1菜单1</a>  
            </div>  
        </div>  
    </div>

    mui('.mui-scroll-wrapper').scroll({   
                scrollX: true,  
                scrollY: false,  
                indicators: false  
    })

也可以给mui-scroll-warpper 添加

mui-slider-indicator mui-segmented-control mui-segmented-control-inverted

这三个类实现(添加这三个类之后无需再初始化scroll)

Native_O

当和上拉加载一起用的时候，往右滑动时右边页面出现大量空白，而且上面也不能横向滚动，安卓手机实测

2017-05-31 21:17
前端大白

回复 Native_O:遇到跟你一样的问题，请问你怎么解决的？

2018-06-06 17:46

Native_O

除非用overflow-x:scroll

x***@qq.com

.cat2{  
                display:block;  
                width:5.40rem;  
                height:.80rem;  
                position:fixed;  
                left:2.10rem;  
                top:.85rem;  
                z-index:5;  
                border-bottom:1px solid #eee;  
                background-color: #fff;  
                overflow-x: scroll;  
            }  
            .cat2 .mui-scroll{  
                white-space: nowrap;  
            }

该问题目前已经被锁定, 无法添加新回复

scroll 横向区域滚动，应该怎么使用？

5 个回复

可以在mui区域滚动基础上做修改实现;

也可以给mui-scroll-warpper 添加

公告

相关问题

scroll 横向区域滚动，应该怎么使用？

与内容相关的链接

5 个回复

可以在mui区域滚动基础上做修改实现;

也可以给mui-scroll-warpper 添加

公告

相关问题