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 をまだ取得しているので、それは機能しないと思いますか?
私が意味をなさない、または明らかなことを見逃している場合は、あなたが与えることができる助けに感謝し、謝罪してください!