移动端实现横向滚动（隐藏横向滚动条）-526互联

如何实现横向滚动(兼容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{
                            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{
                height:150px;
                margin-right: 25px;
                margin-bottom: 10px;
                text-align: center;
            }
        }
    }
}