梅西
梅西
  • 发布:2015-05-21 09:24
  • 更新:2019-12-09 17:47
  • 阅读:17186

mui是否支持横向滚动,怎么设置。

分类:MUI

我的内容是一个table标签,挺大的,显示到webview页面时,table表格超出了屏幕的宽,只现实了一部分,另一部分在屏幕外头了,但是webview没有出现横向滚动条,mui-scroll-wrapper这个属性没起作用?应该咋设置出横向滚动条

2015-05-21 09:24 2 条评论 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com

兄弟你解决了吗?我也遇到这个问题了

木果子

木果子

<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<div class="mui-scroll">
...
</div>
</div>

张一三

张一三


原内容来自 https://segmentfault.com/q/1010000003490547  
在原基础上做了少量修改,避免当内容宽度小于容器宽度时,会出现横向滚动条。解决方法是:将横向滚动条溢出至容器外,保证横向滚动条不可见  

<div class="inc-scroll-landscape-container">  
    <div class="inc-scroll-landscape-content">  
        <ul>  
           <li class="active">a</li>  
            <li>b</li>  
           <li>c</li>  
            <li>e</li>  
            <li>f</li>  
            <li>g</li>  
            <li>h</li>  
        </ul>  
     </div>  
 </div>  

.inc-scroll-landscape-container { width: 100%; height: 50px; overflow: hidden; background-color: #FFF;}  
.inc-scroll-landscape-container > .inc-scroll-landscape-content {  
    padding-bottom: 100px; /* 当内容宽度小于容器宽度时,会出现横向滚动条。将横向滚动条溢出至容器外,保证横向滚动条不可见 */  
    white-space: nowrap;  
    overflow: hidden;  
    overflow-x: scroll; /* 1 */  
    -webkit-backface-visibility: hidden;  
    -webkit-perspective: 1000;  
    -webkit-overflow-scrolling: touch; /* 2 */  
    text-align: justify; /* 3 */  
    &::-webkit-scrollbar { display: none;}  
}  
.inc-scroll-landscape-container > .inc-scroll-landscape-content > ul {}  
.inc-scroll-landscape-container > .inc-scroll-landscape-content > ul > li { width: 60px; height: 50px; line-height: 50px;  
     position: relative; display: inline-block; text-align: center; font-size: 13px; color: #666; font-weight: bold;}  
.inc-scroll-landscape-container > .inc-scroll-landscape-content > ul > li.active:after { position: absolute;  
    right: 16px; bottom: 8px; left: 16px; height: 5px;  
    background-color: #DD524D; content: ' '; transform: scaleY(0.5); -webkit-transform: scaleY(0.5);}
p***@126.com

p***@126.com

工单号 物料单号 物料编码 物料名称 规格型号 数量
101 4444 849489489 电阻 FG-8 10213
101 4444 849489489 电阻 FG-8 10213
101 4444 849489489 电阻 FG-8 10213
101 4444 849489489 电阻 FG-8 10213
101 4444 849489489 电阻 FG-8 10213

我的需求是上面整个表格一起 可以左右滑动。 不是单个一行

赵梦欢

赵梦欢 - 专注前端,乐于分享!

http://ask.dcloud.net.cn/question/24998

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