0

以下问题。我使用了一个简单的 jquery 插件， 到目前为止它工作正常，问题是当我在触摸设备（例如 ipad2）上测试它时，它不可能在 div 内滚动。它也不适用于 2 指滑动！我想这种行为与“标准”滚动条不同。但是有什么解决方案可以让这个可以触摸吗？

我在测试阶段，这意味着主体代码非常简单

$(document).ready(function() {

function appenddiv() {
    var $scrolling = $('<div id="test" class="scrolling">A lot of text in here ...<div id="scroll2"><img src="../images/31670035.jpg"></div></div>');


$scrolling.appendTo($('#container')).scrollbar();

}

$('#scrollbar-link').on('click', function() {
    appenddiv();
});
});

<body>
<a href="#" id="scrollbar-link">Klick mich!</a>

<div id="container">
</div>
</body>

我需要像“可触摸”脚本这样可以滑动滚动条的东西吗？

谢谢

4

2 回答 2

2

:-) 是的，这绝对是一个问题......

根本问题如下：
要创建自定义滚动条，您需要使 DIV 溢出：隐藏 - 隐藏 sys 滚动条。还行吧。但在移动（iPad 也是）设备上，从此时起，您的 DIV 将无法滚动。它将是（仅），如果您使用溢出：自动......这是合乎逻辑的 - 或多或少。但是让您感到头疼 :-)

因此，您必须在这一点上做出选择..

a) 您忘记了触摸设备上的自定义滚动条 - 保持溢出：自动
b) 您手动实现拖放功能 -如果您检测到移动设备

版本 b) 会很棘手 - 再次。因为我们知道的“mousedown”事件在触摸屏上的工作方式不同。不仅有一个 mousedown - 实际上可能有一系列“mousedown”，因为您用手指触摸屏幕，然后用另一根手指触摸屏幕，依此类推......所以在触摸屏上这是一个触摸[] 数组...

绝对有意义，但使事情复杂化...

无论哪种方式，我都不知道任何不太复杂的解决方案...如果有人知道，我也很好奇！:-)

在处理我们的NiceScrollbars 库项目时，我们进行了大量测试并为这个问题（以及其他问题）付出了很多努力......

如果你想更深入地讨论这个问题，我就在这里！会尽力帮助

于 2013-02-22T14:24:13.503 回答
0

无论哪种方式，我都不知道任何不太复杂的解决方案......如果有人知道，我也很好奇！:-)

理论上，我们可以添加一个不透明度=0.000000000001的div，z-index -1（原始div的-1索引。即原始div的z-index为10，那么新div的z-index为9）和滚动=自动。新的 div 将是 div 的副本，在内容和 css 方面具有 scroll=hidden 属性。

滚动事件将通过隐藏的 div 触发，然后更新可见的 div。

太糟糕了，我们必须做到这一点，但它似乎是另一个干净的解决方案/hack，除了你必须复制内容或创建一个保持内容高度的元素。

于 2015-06-19T09:30:24.777 回答