javascript - 由外部 DIV 控制的可滚动 DIV(用于触摸屏)。 jQuery HTML5

Question

我有一个包含一些内容的 DIV，当在触摸设备上查看时，相当大的 DIV 比屏幕的尺寸还宽。所以我添加了以下 CSS:

    #container{
        width: 100% !important;
        height: auto;
        background-color: blue;
        overflow-x: scroll;
        white-space:nowrap;
    }

效果很好，DIV 现在可以左右滚动，而页面上的其他所有内容都保持不变。我的问题是 DIV 中的所有内容在触摸时都会响应，主要是可点击按钮等。

有什么方法可以在容器 DIV 之外添加另一个 DIV 来来回移动它吗？因此，拇指大小的 DIV 可用于左右滚动容器 DIV，但此拇指 DIV 位于容器 DIV 之外。也许只是悬停在它的底部边界上。

希望这是有道理的，我们将不胜感激任何建议或指导!

Answer 1

使用以下 CSS 设置一个 DIV:

#thumb_button{
  position: absolute;
  right: 0px;
  bottom: 0px;
  height: 40px;
  width: 40px;
  z-index: 1000; /* Ensures its on top */
}

然后使用 JS 检测对该 DIV 的点击以滚动另一个 DIV。

$(document).ready(function(){
  $("#thumb_button").click(function(e){
    $("#container").scrollLeft += 10;
  });
});

这是未经测试的。

此外，也许值得使用像 HammerJS 这样的 JS 库来更恰本地与触摸屏设备一起工作，以检测手指按住按钮以继续滚动。