如何实现横向滚动(兼容safari,微信,浏览器)
实现横向滚动需要以下几点:
1、父级盒子要overflow-y:hidden;overflow-x:auto来防止页面宽度溢出,以及实现左右滚动效果
2、::-webkit-scrollbar { display: none;}隐藏横向滚动条(此方法在ios和微信端无效),所以第5步实现兼容
3、滚动条所存在的盒子为g,g之外再设置一个父盒子s并给定高度和overflow:hidden。通过s来遮盖g的滚动条即可实现隐藏滚动条。
示例:
<template>
<div class="university">
<div class="container">
<div class="scroll-hidden"> <!--此盒子设置:height,overflow:hidden-->
<div class="scroll-body"> <!--此盒子设置:滚动条overflow-y:hidden,overflow-x:auto,滚动条display:none,padding-bottom-->
<div class="scroll-secbody"> <!--此盒子设置 :10000px宽度-->
<div v-for="(item,index) in universityList" :key="index" class="every_content"> <!--此盒子设置: 浮动.。注:不要用flex-->
<div class="content_img"><img :src="item.pimage" /></div>
<div class="content_name">{{item.pname}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script></script>
<style scoped lang="less">
.university{
.container{
.scroll-hidden{
height:152px; //6、设置固定高度(以子盒子为准)
overflow:hidden; //7、超出部分隐藏
.scroll-body{
overflow-y: hidden; //2、父级盒子:竖向超出部分隐藏
overflow-x: auto; //3、父级盒子:控制横向可滚动,配合overflow-y:hidden共同控制内容不溢出当前屏幕
&::-webkit-scrollbar { //4、父级盒子:隐藏滚动条(不兼容ios和微信端)
display: none;
}
padding-bottom: 100px; //5、通过padding-bottom将滚动条挤到盒子外
.scroll-secbody{
white-space: nowrap; //1、强制不换行
display: flex;
.every_content{
flex-shrink: 0; //注,此处最好给上flex-shrink: 0;防止挤压
height:150px;
margin-right: 25px;
margin-bottom: 10px;
text-align: center;
}
}
}
}
}
}
</style>
无注释,直接复制代码
<div class="scroll-hidden">
<div class="scroll-body">
<div class="scroll-secbody">
<div v-for="(item,index) in list" :key="index" class="every-item">
......
</div>
</div>
</div>
</div>
.scroll-hidden{
height:50px;
overflow:hidden;
.scroll-body{
overflow-y: hidden;
overflow-x: auto;
&::-webkit-scrollbar {
display: none;
}
padding-bottom: 100px;
.scroll-secbody{
white-space: nowrap;
display: flex;
.every_content{
flex-shrink: 0;
height:150px;
margin-right: 25px;
margin-bottom: 10px;
text-align: center;
}
}
}
}