自定义滚动条在触摸设备上不起作用

custom scrollbar not working on touch device

本文关键字：不起作用 触摸 滚动条 自定义      更新时间：2023-09-26

以下问题。im使用一个位于此处的简单jquery插件到目前为止，它运行良好，问题是当我在触摸设备(如ipad2(上测试它时，它不可能在div中滚动。它也不适用于两个手指滑动！我想这种行为与"标准"滚动条不同。但有什么解决方案可以让它变得触手可及吗？

im处于测试阶段，这意味着主体代码是非常简单的

$(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>

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

感谢

：-(是的，这显然是一个问题

根本问题如下：
要创建自定义滚动条，您需要使DIV溢出：隐藏-隐藏系统滚动条。这是可以的。但是在移动设备(iPad也是(上，从这一点起，你的DIV将无法滚动。如果您使用overflow：auto。。。这或多或少是合乎逻辑的。但会让你头疼：-(

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

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

版本b(将再次变得棘手。因为我们称之为"mousedown"的事件在触摸屏上的工作方式不同。不仅仅有一个mousedown——事实上，可能有一个"mousedown"的数组，因为你用手指触摸屏幕，然后用另一个手指触摸屏幕等等……所以在触摸屏上，这是一个触摸[]数组

绝对有道理，但会使事情复杂化

不管怎样，我都不知道有什么不那么复杂的解决方案。。。如果有人这样做，我也很好奇！！：-(

在我们的NiceScrollbars库项目中，我们对这个问题(以及其他问题(进行了大量的测试和努力

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

不管怎样，我都不知道有什么不那么复杂的解决方案。。。如果有人是的，我也很好奇！！：-(

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

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

遗憾的是，我们必须进行扩展，但除了必须复制内容或创建一个保持内容高度的元素之外，这似乎是另一个干净的解决方案/破解方法。

相关文章：