css實現在一定區域內垂直上下滾動及去除滾動條

 

 

 

簡單寫下樣式：

  <div class="subject-cont">
    <div class="subject-block">
      <div v-for='(item, index) in ["語文", "數學", "英語", "物理", "化學", "生物", "體育"]' :key="index">{{ item }}</div>
    </div>
  </div>

 

css樣式：

  .subject-block {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    white-space: nowrap;
    div {
      width: 100%;
      height: 30px;
      line-height: 30px;
      text-align: center;
      font-size: 15px;
      color: #9f9fa0;
      border-bottom: 0.5px solid #ddd;
    }

    div:last-child {
      border-bottom: 0;
    }
  }
  // 去除滾動條
  .subject-block::-webkit-scrollbar {
    width: 0px;
  }

 

 

去除滾動條，可以使用 ::-webkit-scrollbar 來實現

 

如果是實現左右滾動，在  ::-webkit-scrollbar 里改成height就可以啦

 

例1：左右滾動

在左右滾動的時候，配合微信小程序中scroll-view，可能會遇到上下不齊，如下圖所示：

 

 

 這個時候，只需在item盒子上添加 上下對齊即可。

vertical-align: top;