Touch Punch가있는 jQuery UI 슬라이더 : 핸들 잠김

Question

Touch Punch (http://touchpunch.furf.com)와 함께 jQuery UI 슬라이더를 사용하여 터치 모바일 장치에서 작동합니다. 슬라이더는 위치 인 헤더에 위치합니다. 상단에 고정됩니다. 머리글 아래의 내용은 고정되어 있지 않으며 위로 스크롤 할 때 머리글 아래로 스크롤됩니다. 그것은 바탕 화면에서 잘 작동하지만 일단 iPhone을 테스트 해 보면 슬라이더 핸들은 스크롤을 시작하면 드래그 할 수 없습니다.

핸들의 클릭/터치 이벤트 대신 스크롤 이벤트를 실행하고 있다고 생각합니다.

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

을하지만 난 여전히 클래스와 사업부를 따기로 작동하지 않는 가정 :

<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의 사업부를 통해 스크롤을 사용하지 않도록 추가 시도했습니다. 밑에 찍은 사진들?

이해해 주거나 사과하지 않을 경우 도움을 주셔서 감사합니다.

Answer 1

좋아요.이 문제를 해결 한 것으로 생각됩니다. 아마도 가장 효율적인 방법은 아니며 지금까지 iPhone 및 iPad에서만 확인할 수있었습니다.

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

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

그래서하는 TouchMove 이벤트는 기본 작업 (즉, 스크롤)하지만 슬라이더 핸들의 작동을 방지 #top 사업부에 포함, 같은 지역에 트리거합니다.