【问题标题】:custom scrollbar not working on touch device自定义滚动条在触摸设备上不起作用
【发布时间】:2013-02-08 04:19:51
【问题描述】:

以下问题。我正在使用位于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>  

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

谢谢

【问题讨论】:

  • 这意味着破解第三方库以使用触摸事件。祝你好运。
  • 但我不能是唯一一个在触摸设备上使用自定义滚动条的人吧?我愿意接受任何新方法来做到这一点,我不特别想要那个插件!

标签: javascript jquery touch


【解决方案1】:

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

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

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

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

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

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

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

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

如果您想更深入地讨论这个问题,我在这里!会尽力帮忙的

【讨论】:

  • 非常感谢您的详细回答!这说得通。我的另一个选择是用 css 设置滚动条的样式,这在所有 webkit 浏览器上都很好用!但这意味着(尽管如此)它在 Firefox 或 Opera 上不起作用!但也许这可能是你的答案,我发现了一篇非常有用的文章http://css-tricks.com/custom-scrollbars-in-webkit/ 主题:我认为拖放变体是可能的,但我不想在它上面投入太多时间,因为客户不会为那个,哈哈!
  • 清除。 :-) 是的,如果这已经足够了,您可以尝试使用 css,并且您不会遇到“让它跨浏览器!”的难题。问题。 :-) 但在这种情况下,也许你应该考虑版本 a)!真的!您只需要能够检测移动(或触摸屏)浏览器与普通浏览器!
  • 这是通过简单的用户代理检测和 jquery ui 完成的吗?并将“滚动条处理程序”应用为可拖动?
  • 用户代理检测只是其中的一部分。从中您只会知道这是否是移动浏览器。仍然有可能这不是移动浏览器而是触摸屏......这是我们正在使用的(我不能在这里添加代码但是......) var isTouchPad = (/hp-tablet/gi).test(navigator.应用版本); var hasTouch = ('ontouchstart' in window && !isTouchPad);
  • 我刚刚在右侧找到了“相关”列 :-) 因为这里的问题是如何检测触摸屏/移动设备我是否在那里找到了this question.. 我打算稍后仔细阅读,所以我标记了那个。但可能答案应该是有价值的(据我所知)。还有一件事:如果你认为这是一个答案,你能接受吗?我需要收集足够的声望才能获得“评论任何地方”的特权!! :-) 非常感谢您这样做...
【解决方案2】:

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

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

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

太糟糕了,我们不得不去扩展,但它似乎是另一个干净的解决方案/hack,除了你必须复制内容或创建一个保持内容高度的元素。

【讨论】:

  • 通过这个小提琴证明它是一个可行的解决方案而不是一个理论(在 chrome android 4.4.4 上测试):jsfiddle.net/INF1/a2yy46rq/1
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-08-28
  • 1970-01-01
  • 2023-03-18
相关资源
最近更新 更多