css 實現移動端橫滑

效果

實現

<div class="tab-part-wrapper">
  <div class="tab-part">
    <ul class="scroll-hidden">
      <li class="tab-item active">小說·文學</li>
      <li class="tab-item">歷史·傳記</li>
      <li class="tab-item">社科·心理</li>
      <li class="tab-item">經管·科普</li>
      <li class="tab-item">藝術·文化</li>
    </ul>
  </div>
</div> 

.tab-part-wrapper {
  height: 40px;
  max-width: 360px;
}
.tab-part {
  height: 40px;
  background: #c9d0ec;
  overflow: hidden;
  font-size: 0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.tab-item {
  display: inline-block;
  height: 40px;
  width: 94px;
  font-size: 14px;
  line-height: 40px;
  text-align: center;
  color: #021f88;
}
.active {
  color: #fff;
  font-weight: 800;
  background: #021f88;
}
.scroll-hidden {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
  margin-bottom: -10px;
}

問題

1、ios滑動不流暢

設置滾動回彈效果：

  -webkit-overflow-scrolling: touch;

2、隱藏滾動條

一般使用這個屬性就能隱藏滾動條：

::-webkit-scrollbar {
  display: none;
} 

但是在微信 webview 內核升級後，添加了 -webkit-overflow-scrolling: touch; 這個屬性後，就不起作用了。

所以就需要自己寫個 dom 手動來隱藏滾動條，比如 scroll-hidden 樣式中：

padding-bottom: 10px;
margin-bottom: -10px;