1

我正在使用带有 Touch Punch (http://touchpunch.furf.com) 的 jQuery UI 滑块，因此它适用于触摸移动设备。滑块位于位置：固定到顶部的标题中。标题下方的内容不固定，并在您向上滚动时滚动到标题下方。它在桌面上运行良好，但是当我在 iPhone 上对其进行测试时，一旦开始向上滚动，滑块手柄就无法拖动。

我认为它正在执行滚动事件而不是句柄的单击/触摸事件。

<div id="top">
  <div id="slider"></div>
</div>

<div class="pics">CONTENT</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/jquery-ui-1.9.1.custom.min.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript">    
$('document').ready(function() {

$(function() {
    $( "#slider" ).slider({
        value:250,
        min: 50,
        max: 1000,
        range: "min",
        step: 50,
        slide: function( event, ui ) {
        $( "#amount" ).html( ui.value );
        }
    });
});
});
</script>


//css//

#top {
width: 100%;
position: fixed;
top:0; }

.pics {
margin: 0 auto;
width: 100%;
max-width: 1280px;
padding-top: 86px;}

环顾四周后，我尝试添加它以禁用在#top div上的滚动：

$("#top").bind("touchstart", function(e) { e.preventDefault(); });

但我认为这不起作用，因为它仍在使用下面的类 .pics 获取 div？

感谢您提供的任何帮助并道歉，如果我没有意义或遗漏了明显的东西！

4

1 回答 1

0

好的，我想我已经找到了解决办法。可能不是最有效的方法，到目前为止我只能在 iPhone 和 iPad 上检查它。

var divTop = $("#top").height();

$(document).bind("touchmove", function(e) { 
if (e.originalEvent.touches[0].clientY < divTop) {
    e.preventDefault();     
}
});

因此，如果在 div #top 覆盖的同一区域中触发了 touchmove 事件，则会阻止默认操作（即滚动），但滑块句柄可以工作。

于 2012-12-10T21:14:49.750 回答