0

我有一个 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 之外。也许只是悬停在它的底部边框上。

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

4

1 回答 1

0

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

于 2013-08-20T11:28:01.827 回答