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库来更好地使用触摸屏设备来检测手指按住按钮以继续滚动。

可滚动DIV由外部DIV控制（用于触摸屏）。 jQuery HTML5

1 个答案: