Question

我正在使用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？

感谢您提供的任何帮助，如果我没有意义或错过明显的事情，我会道歉！

Answer 1

好的，我想我找到了解决这个问题的方法。可能不是最有效的方式，到目前为止我只能在iPhone和iPad上查看它。

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

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

因此，如果在div #top覆盖的同一区域内触发touchmove事件，则会阻止默认操作（即滚动），但滑块手柄会起作用。

带触摸打孔的jQuery UI滑块：手柄已锁定

1 个答案: