鍍金池/ 問(wèn)答/HTML5  HTML/ 移動(dòng)端使用overflow-x:scoll實(shí)現(xiàn)超出左右滑動(dòng)時(shí),觸摸滑動(dòng)不順暢

移動(dòng)端使用overflow-x:scoll實(shí)現(xiàn)超出左右滑動(dòng)時(shí),觸摸滑動(dòng)不順暢

移動(dòng)端使用overflow-x:scoll實(shí)現(xiàn)超出左右滑動(dòng)時(shí),左右滑動(dòng)不順暢
然后加了-webkit-overflow-scrolling: touch; 倒是解決了不順暢的問(wèn)題,但是有了滾動(dòng)條~就很別扭
求教:
有沒(méi)有可以去掉滾動(dòng)條的方法,或者更好的解決不順暢的方法。Thanks?(?ω?)?

回答
編輯回答
傻丟丟

用一個(gè)包裹層設(shè)置 overflow: hidden 把內(nèi)層的滾動(dòng)條遮住.

在線(xiàn)demo: https://codepen.io/liximomo/p...

<div class="scrollerContainer">
  <div class="scroller">
    <div class="content">填充內(nèi)容, 請(qǐng)左右滾動(dòng)</div>
  </div>
</div>
.scrollerContainer {
  height: 40px;
  overflow: hidden;
}

.scroller {
  height: 40px;
  width: 300px;
  overflow-y: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; 
  padding-bottom: 20px;
}

.content {
  width: 600px;
}
2018年6月27日 15:28