7

理解を深めるために jsFiddle を次に示します: http://jsfiddle.net/BzYcZ/

スクロールバーを持つ div がいくつかあります。

私が欲しいのは、マウススクロールを使用してdivの最後に到達したときにスクロールを停止し、ページ全体をスクロールしないときです。

何が起こるかというと、div の最後に到達すると、ページ全体がスクロールし始めます。

これはブラウザ駆動であることは理解していますが、この種の状況を処理し、カーソルがこの div 要素の上にあるときにページ全体のスクロールを防ぐことができる JS イベントはありますか?

編集：

ページ全体をスクロールできるようにしたいのですが、マウスがこの div の外にあるときだけです。

解決

.noscroll
{
    position: fixed; 
    overflow-y: scroll;
    width: 100%;
}

JavaScript の部分は次のとおりです。

$('.small_content').hover(
    function () {
        $('body').addClass('noscroll');
    }, 
    function () {
        $('body').removeClass('noscroll');
    }
 );

動作中の jsFiddle へのリンクは次のとおりです: http://jsfiddle.net/BzYcZ/3/

4

2 に答える 2

3

jQuery を使用して、body/html のスクロールバーをフリーズすることができます

(ちなみに、jQuery はコーディングを簡単かつ迅速にする Javascript ライブラリです: http://jquery.com/ )

例：

$('.yourdivclass').hover(
function () {
    $('html, body').css("overflow", "hidden");
},
function () {
    $('html, body').css("overflow", "auto");
});

更新：

スクロールバーを保持して無効にするには、次の解決策に従ってください。

例: http://jsfiddle.net/BzYcZ/2/

ここでJavascriptを更新しました：

$('.small_content').hover(
function () {
   $('body').addClass('noscroll');
},
function () {
    $('body').removeClass('noscroll');
});​

追加の CSS:

body.noscroll
{
    position: fixed; 
    overflow-y: scroll;
    width: 100%;
}
于 2012-08-08T14:16:03.987 に答える
0

overflow:hidden本文コンテナーをまったくスクロールしたくない場合は、本文にプロパティを追加できます。または、Facebook で行われているように、jQuery を使用して本文コンテナーのスクロールバーをフリーズできます。

于 2012-08-08T14:18:29.980 に答える