Question

以下问题。即时通讯使用位于here的简单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>

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

由于

Answer 1

:-)是的，这绝对是一个问题......
根本问题如下：
要创建自定义滚动条，您需要使DIV溢出：隐藏 - 隐藏系统滚动条。还行吧。但从移动设备（iPad）设备开始，您的DIV将无法滚动。它将是（仅），如果你使用overflow：auto ...这是合乎逻辑的 - 或多或少。但是让你头疼你现在:-)

所以，你必须在这一点做出选择..

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

版本b）将是棘手的 - 再次。因为我们所知道的“mousedown”事件在触摸屏上的工作方式不同。不仅有一个mousedown - 实际上可能有一系列“mousedown”，因为你用手指触摸屏幕，然后你用另一个手指触摸屏幕，等等...所以在触摸屏上这是一个触摸[] array ...

绝对有意义，但使事情变得复杂......
无论哪种方式，我都不知道任何不太复杂的解决方案......如果有人这样做，我也很好奇！ :-)

在我们的NiceScrollbars library项目工作时，我们做了很多测试，并在这个问题（以及其他问题）上付出了很多努力...

如果你想更深入地讨论这个问题我就在这里！将尝试帮助

Answer 2

无论哪种方式，我都不知道任何不那么复杂的解决方案......如果有的话是的，我也很好奇!! :-)

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

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

太糟糕了，我们必须去那个范围，但它似乎是另一个干净的解决方案/黑客旁边的事实，你必须复制内容或创建一个保持内容高度的元素。

自定义滚动条无法在触摸设备上工作

2 个答案: