微信小程序去掉滾動條

小程序開發項目中，老是會遇到出現豎向滾動條的狀況，有時候讓人看着很不舒服（強迫症忍不了！！），那就只有想辦法解決了。才疏學淺，若有錯誤，歡迎指點，感激涕零！

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