微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

水平多个div,超出出现横向滚动条;隐藏滚动条,但是依然可以滚动;

1. 【问题】水平多个div块,超出外面div盒子后,水平出现横向滚动条?

    按常理水平有多个div块,在超出外面div盒子后,会另起一行显示;但这不是我们想要的。

    方法:1. 设置多个div块的外面再套一层div,设置它的宽度等于多个div宽度的和,此时多个div块外面第二层的div设置overflow:auto,这样将出现水平滚动条;

                   :style=" ‘width:‘ + ‘76‘*normlist.length + ‘px;‘ "

    延伸:1. class和style的绑定:https://cn.vuejs.org/v2/guide/class-and-style.html

     2. class和style的绑定的Vue源码分析:待定

2. 【问题】隐藏滚动条,但是依然要可以滚动?

    方法:a:多个div高度; b: 多个div外面第二层的div高度; c: 多个div外面第三层的div高度; d: 滚动条的高度;

    c = a;

    b = a+d;

    其中b的用法:style="height: calc(100% + 8px);overflow: auto;"

    延伸:1. CSS的calc的用法

 

部分使用代码

 <div class="float-left normlist">
        <div style="height: calc(100% + 8px);overflow: auto;">
                <div :style="‘width:‘+‘76‘*normlist.length+‘px;‘">
                        <span class="active" v-for="(item,index) in normlist"     
                            :key="index">指标{{ index }}
                        </span>
                </div>
         </div>
</div>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。