始終滾動div元素而不是頁面本身

我有一個頁面佈局，內部爲<div id="content">元素，其中包含頁面上的重要內容。關於設計的重要部分是：始終滾動div元素而不是頁面本身

#content { 
    height: 300px; 
    width: 500px; 
    overflow: scroll; 
}

現在當包含文本大於300px，我需要能夠滾動它。是否可以滾動<div>，即使鼠標沒有懸停該元素（箭頭鍵也應該有效）？

請注意，我不想禁用'全局'滾動：頁面上應該有兩個滾動條，全局滾動條和<div>的滾動條。

唯一改變的是內部<div>應該總是滾動，除非它不能再被移動（在這種情況下頁面應該開始滾動）。

這可能以某種方式實現嗎？

編輯

我認爲這個問題是有點混亂，所以我會追加的我怎麼想它的工作序列。（Khez已經提供了一個概念驗證。）

第一張圖片是打開時頁面的外觀。現在

，鼠標坐在指示位置和卷軸和什麼應該發生的是

首先內的div滾動其內容（圖2）
內的div已完成滾動（圖3）
body元素會滾動以便div自身被移動。（圖4）

希望現在有點清楚。

Scroll concept （圖像感謝gomockingbird.com）

來源

2011-04-15 Debilski

我嘗試使用`window.onscroll`來捕獲事件。它有點作品，但絕對不會。看看我的[jsfiddle]（http://jsfiddle.net/Khez/cKDSb/）。只是在這裏發佈，因爲也許它會引發某人的想法。 – Khez 2011-04-15 14:56:03

一分鐘即時通訊工具爲您的更新 – Neal 2011-04-15 15:56:38

我發佈了一個答案更新 – Neal 2011-04-15 16:15:44

我不認爲這是可能實現無腳本吧，這可能是凌亂的，考慮其滾動的元素衆多的事件（單擊，滾輪，向下箭頭，空格鍵）。

來源

2011-04-15 14:26:51 alex

腳本部分不是問題。畢竟，如果沒有這個功能，這個網站將毫無用處。這很糟糕，如果它特別混亂。我不想在不知道自己在做什麼的情況下引入大量的錯誤。 – Debilski 2011-04-15 14:31:34

我相信你可以做到這一點的唯一方法是通過使用框架。

Frames - W3Schools Reference

來源

2011-04-15 14:32:29 Ollie

的選項可以使用jQuery插件滾動。我知道它有可用於在div上創建滾動條。您需要添加自己的唯一東西是按下鍵盤按鈕時捕捉事件的邏輯。只需檢查箭頭鍵的鍵碼並使div向下滾動即可。

該插件可以找到here。

你可以像這樣使用它;

<script type="text/javascript"> 
    // append scrollbar to all DOM nodes with class css-scrollbar 
    $(function(){ 
    $('.css-scrollbar').scrollbar(); 
    }) 
</script>

來源

2011-04-15 14:47:04 Rob

這裏也許是一個工作的解決方案：（小提琴：http://jsfiddle.net/maniator/9sb2a/）

var last_scroll = -1; 
$(window).scroll(function(e){ 
    if($('#content').scrollTop()); 
    var scroll = $('#view').data('scroll'); 
    if(scroll == undefined){ 
     $('#content').data('scroll', 5); 
     scroll = $('#content').data('scroll'); 
    } 
    else { 
     $('#content').data('scroll', scroll + 5); 
     scroll = $('#view').data('scroll'); 
    } 
    /* 
    console.log({ 
     'window scroll':$('window').scrollTop(), 
     'scroll var': scroll, 
     'view scroll':$('#view').scrollTop(), 
     'view height':$('#view').height(), 
     'ls': last_scroll 
    }); 
    //*/ 
    if(last_scroll != $('#content').scrollTop()){ //check for new scroll 
     last_scroll = $('#content').scrollTop() 
     $('#content').scrollTop($('#content').scrollTop() + scroll); 

     $(this).scrollTop(0); 
     //console.log(e, 'scrolling'); 
    } 

})

這是一個有點馬車，但它是一個開始:-)

來源

2011-04-15 16:15:24 Neal

如果你只是想有一個固定的位置「格」，並滾動只有它，也許你可以使用像一招：

http://jsfiddle.net/3cpvT/

使用鼠標滾輪和各種按鍵滾動可按預期工作。唯一的問題是滾動條僅在文檔主體上。

來源

2011-12-28 11:51:16 Qtax

我找到了一個解決方案...不完美... http://jsfiddle.net/fGjUD/6/。

CSS：

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

JS（jQuery的）：

if ($("body").height() > $(window).height()) { 
    var top; 
    $('#scrolldiv').mouseenter(function() { 
     top = $(window).scrollTop(); 
     $('body').addClass('noscroll').css({top: -top + 'px'}); 
    }).mouseleave(function() { 
     $('body').removeClass('noscroll'); 
     $(window).scrollTop(top); 
    }); 
}

文字環繞的問題可以投入固定寬度的DIV的全部內容來解決。 IE瀏覽器還有一個bug。如果頁面具有中心對齊的背景，它將在#scrolldiv上的鼠標中心左右移動

來源

2013-04-18 12:00:46

始終滾動div元素而不是頁面本身

回答

相關問題