小程序开发项目中，总是会遇到出现竖向滚动条的情况，有时候让人看着很不舒服（强迫症忍不了！！），那就只有想办法解决了。才疏学浅，如有错误，欢迎指点，感激不尽！
1. 使用view布局。
思路：
- 最外层<view class="container">设置宽度超过屏幕宽度（超出多少无所谓，至少比滚动条宽）；container设置overflow-x: scroll隐藏，overflow-y: scroll；
- 【原理】滚动条会贴着 container 的右侧，所以加宽以后 设置overflow-x：hidden后会不显示在屏幕内。
- 内层（第二个）<view class="content">,设置100vw（或者自己需要展示的宽度）；然后绝对定位到屏幕左上角。top:0; left: 0。
1.1 代码如下：
<!-- wxml-->
<view class="container">
<view class="content">
// 具体 wxml内容
<view class="neirong"></view>
<view class="neirong1"></view>
</view>
</view>
<!-- wxss-->
.container {
overflow-y: scroll; *允许y轴滚动展示*/
overflow-x: hidden;
width: 105vw; /*超过屏幕宽度*/
position: absolute;
}
.content{
width: 100vw;
position: absolute;
left: 0;
top:0;
}
.neirong{
height: 900px;
width: 100%;
background-color: rgb(0, 255, 191)；/*绿色*/
}
.neirong1{
height: 900px;
width: 100%;
background-color: rgb(255, 0, 34) /*红色*/
}
1.2 效果图：
2. 使用 <view-scroll>
思路：
- 滚动条会贴着 最外层框 的右侧，所以加宽以后 设置overflow-x：hidden后会不显示在屏幕内。
2.1 代码如下：
<!-- wxml -->
<scroll-view
// 第一层（宽度设超过100vw）
class="scroll-view"
scroll-y="{{true}}">
// 第二层
<view class="box">
<view class="content1">
<text class="text">23456789101112wweweweqwewq</text>
</view>
<view class="content2"></view>
</view>
</scroll-view>
<!-- wxss -->
/* 最外层的 scroll-view*/
.scroll-view{
width: 105vw;
position: absolute;
overflow-x:hidden;
height: 100vh;
}
/* 第二层view*/
.box{
width: 100vw;
position: absolute;
top: 0;
left: 0;
}
/* 内容区域 */
.content1 {
height: 900px;
font-size: 60px;
background: rgb(153, 121, 51);
width: 100%;
}
.content2{
height: 900px;
width: 100%;
background: rgba(51, 153, 85, 0.705);
}
.text{
width: 100%;
/* 加上下边三个属性，text和view才会自动换行 */
word-wrap: break-word;
word-break: break-all;
white-space: pre-line;
}2.3 效果图：
