微信小程序去掉滚动条

小程序开发项目中，老是会遇到出现竖向滚动条的状况，有时候让人看着很不舒服（强迫症忍不了！！），那就只有想办法解决了。才疏学浅，若有错误，欢迎指点，感激涕零！

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 效果图：