Question

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

我想在div＆＃34; list＆＃34;内滚动水平。在PC浏览器中一切正常，但是当我水平滚动时，智能手机只能滚动一点像素，所以我要滚动10-15次才能看到最后一个元素！

这里是css的代码

＆＃13;

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
}

＆＃13;

<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>

＆＃13;

Answer 1

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

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

jquery移动水平滚动

1 个答案: