1

次の問題に関するスクリプトまたは記事に出くわしたことがあります。

スクロール可能な複数の要素が含まれるスクロール可能なページを想像してみてください。ページを下にスクロールすると、カーソルがスクロール可能な要素に出くわし、それらがフォーカスされます。その結果、ページ全体を再度スクロールできるようになる前に、その要素からカーソルを削除するか、その要素を下にスクロールする必要があります。

私が見たデモでは、カーソルの移動またはスクロールの何らかの中断の後にスクロール可能な要素にのみ焦点を当てることで、その問題を修正しました。そのため、ページを下にスクロールすると、中断することなくスクロールし続けることができます (スクロール可能な要素の上に浮かんでいます)。

私が話しているスクリプトを知っている人はいますか？

4

2 に答える 2

0

私が理解できた場合は、それ以外の場合はお知らせください。スクロールイベントを検出したい場合は、jquery ページからscroll()を使用する必要があります。

この例を試してください:

<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:blue; }
  p { color:green; }
  span { color:red; display:none; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>Try scrolling the iframe.</div>
  <p>Paragraph - <span>Scroll happened!</span></p>
<script>
    $("p").clone().appendTo(document.body);
    $("p").clone().appendTo(document.body);
    $("p").clone().appendTo(document.body);
    $(window).scroll(function () { 
      $("span").css("display", "inline").fadeOut("slow"); 
    });

</script>

</body>
</html>

ここでデモを参照してください: http://jsfiddle.net/4M7XK/ (右下のブロックの高さを最小化)

于 2012-09-10T13:20:51.793 に答える
0

申し訳ありませんが、あなたが参照している元の記事は今はありませんが、ここにアイデア、どのように機能させるかを示します.

ユーザーがスクロールを開始したら。(例: $(window).scroll(function(){...}) from jQuery )、ページ全体を上から下までカバーする空の div を配置します。この要素は、スクロール可能な可能性のある他のすべての div の上にあり、スクロール イベントをキャッチするたびにそれらを防ぎます。この要素は、数ミリ秒のタイムアウトで削除する必要があります。

$(window).scroll(function(){
var $cover = $('<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: '+ $(document).height() + 'px; z-index: 100000">asdasd</div>')
$cover.appendTo($("body"));
setTimeout(function(){
     $cover.remove();
},200); 
});
于 2012-09-10T13:54:14.580 に答える