css - jquery 移动水平滚动

Question

我遇到了 jquery 移动和水平滚动的问题。

我想在 div“列表”内水平滚动。在 pc 浏览器中一切正常，但在智能手机上，当我水平滚动时，元素只滚动了一点点像素，所以我必须滚动 10-15 次才能看到最后一个元素!

这是CSS代码

div#list {
  overflow: scroll;
  width: 100%;
  height: auto;
  margin: 0;
  white-space: nowrap
}
div.wrapper {
  overflow: visible;
  text-align: left;
}
div.element {
  display: inline-block;
  ;
  margin: 0 20px 0 0;
  padding: 1em;
  background: none repeat scroll 0 0 #3F7137;
  border: 1px solid #79A777;
  color: #FFFFFF;
  text-shadow: 0 1px 1px #000;
  cursor: move;
  width: 80px;
  height: 50px;
  border-radius: 20px;
  font-size: 0.8em;
  transition: 0.5s;
  text-align: center;
  overflow: hidden
}

<div id="list">
  <div class="wrapper">
    <div class="element">1</div>
    <div class="element">2</div>
    <div class="element">3</div>
  </div>
  <div class="wrapper">
    <div class="element">4</div>
    <div class="element">5</div>
    <div class="element">6</div>
    <div class="element">7</div>
    <div class="element">8</div>
  </div>
  <div class="wrapper">
    <div class="element">9</div>
    <div class="element">10</div>
    <div class="element">11</div>
  </div>
</div>

Answer 1

使用 jQuery 禁用容器 div 中的滑动事件也适用于智能手机!

        $(document).ready( function () {
            $("#list").on( "swipeleft", function (e) { e.preventDefault(); ScrollPageLeft() });
            $("#list").on( "swiperight", function (e) { e.preventDefault(); ScrollPageRight() });
        });