滾動問題與CSS溢出：滾動HTML

這裏的jsfiddle更好地理解：http://jsfiddle.net/BzYcZ/滾動問題與CSS溢出：滾動HTML

我有一些DIV有滾動條。

我想要的是當我使用鼠標滾動停止滾動到達div的結尾，而不是滾動整個頁面。

insted發生的事情是，當我到達div的結尾整個頁面開始滾動。

我知道這是瀏覽器驅動，但是有一些JS事件可以處理這種情況&防止滾動整個頁面，因爲我的光標在這個div元素上。

編輯：

我希望能夠滾動整個頁面，但只有當我的鼠標離開這個div的。

SOLUTION

.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/

來源

2012-08-08 sensor

個人而言，這是我喜歡並使用很多的功能。沒有它會惹惱我的垃圾。 – Bojangles 2012-08-08 14:16:57

設置'body {overflow：hidden}'會阻止頁面滾動。但是，爲什麼不在頁面上包含高度，以避免溢出隱藏？ – Joe 2012-08-08 14:18:09

@Joe我更新了我的問題，因爲我希望能夠滾動正文。這意味着根據鼠標位置應該包含某種JavaScript，禁用身體滾動功能。 – sensor 2012-08-08 14:23:53

你可以使用jQuery和凍結的任何滾動body/html

（順便說一下，jQuery是使得編碼Javascript庫更容易和更快：http://jquery.com/）

例子：

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

UPDATE：

爲了保持滾動條，只是禁用它們，請遵循以下解決方案：Just disable scroll not hide it?

示例：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-08 14:16:03 jackJoe

Actualy我想根據光標所在的位置滾動body/html – sensor 2012-08-08 14:16:52

@sensor我用一個例子更新了我的答案，當你將div懸停在'yourdivclass'類 – jackJoe 2012-08-08 14:21:59

感謝您的回覆！我已經嘗試過了，但頁面閃爍真的很糟糕，因爲整個頁面的滾動條在overflow：hidden被設置時會消失。 – sensor 2012-08-08 14:22:07

您可以overflow:hidden屬性添加到身體，如果你不想在所有的滾動體用容器，或者您可以使用jQuery凍結body容器滾動條，就像在Facebook上完成一樣。

來源

2012-08-08 14:18:29

滾動問題與CSS溢出：滾動HTML

回答

相關問題