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

OK、私はこれに対する修正を見つけたと思います。おそらく最も効率的な方法ではなく、これまでのところ 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 に答える