我怎樣才能繼續正常滾動滾動溢出DIV

Question

本頁面使用溢出框，以便您可以通過內容滾動的底部後：如果您滾動到內容的底部

http://jsbin.com/itajok/539/edit?html,js,output

，您的滾動卡在該框中，直到您將光標移出框並滾動瀏覽頁面的其餘部分（示例中的元素設置爲position：fixed，但刪除該規則仍具有相同的結果）

這發生在我身上的任何具有定義高度和溢出的div：auto;

<style> 
div { 
    overflow: auto; 
    height: 100px; 
} 
</style> 

<div> 
Overflow is auto and if I add more content that exceeds the height, I can scroll 
</div> 

我該如何讓它在滾動到溢出div底部後自動返回滾動實際頁面？

Answer 1

JQuery的解決方案

首先檢查這個JS功能：

$().scrollTop()   // To know how much has been scrolled 
$().innerHeight()  // To know inner height of the element 
DOMElement.scrollHeight // To know height of the content of a DOM element 

現在讓我告訴你一個片段，其中使用檢測的功能，當你已經達到了DOM的內容結束元素，可能是一個div，然後將焦點更改爲主容器。從那裏繼續滾動。

#mycontainer { 
 
position:absolute; 
 
background:#cccccc; 
 
    overflow: auto; 
 
    height: 140px; 
 
    width:700px; 
 
} 
 
#mycontent { 
 
position:relative; 
 
display:block; 
 
margin:0 auto; 
 
background:#aaaaaa; 
 
overflow: auto; 
 
    height: 120px; 
 
    width:200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="mycontainer"> 
 

 
<div id="mycontent"> 
 
Lorem ipsum dolor sit amet <br> 
 
Consectetuer augue nibh lacus at <br> 
 
Pretium Donec felis dolor penatibus <br> 
 
Phasellus consequat Vivamus dui lacinia <br> 
 
Ornare nonummy laoreet lacus Donec <br> 
 
Ut ut libero Curabitur id <br> 
 
Dui pretium hendrerit sapien Pellentesque <br> 
 
Lorem ipsum dolor sit amet <br> 
 
Consectetuer augue nibh lacus at <br> 
 
Pretium Donec felis dolor penatibus <br> 
 
Phasellus consequat Vivamus dui lacinia <br> 
 
Ornare nonummy laoreet lacus Donec <br> 
 
Ut ut libero Curabitur id <br> 
 
Dui pretium hendrerit sapien Pellentesque <br> 
 
Lorem ipsum dolor sit amet <br> 
 
Consectetuer augue nibh lacus at <br> 
 
Pretium Donec felis dolor penatibus <br> 
 
Phasellus consequat Vivamus dui lacinia <br> 
 
Ornare nonummy laoreet lacus Donec <br> 
 
Ut ut libero Curabitur id <br> 
 
Dui pretium hendrerit sapien Pellentesque <br> 
 

 
</div> 
 
Lorem ipsum dolor sit amet <br> 
 
Consectetuer augue nibh lacus at <br> 
 
Pretium Donec felis dolor penatibus <br> 
 
Phasellus consequat Vivamus dui lacinia <br> 
 
Ornare nonummy laoreet lacus Donec <br> 
 
Ut ut libero Curabitur id <br> 
 
Dui pretium hendrerit sapien Pellentesque <br> 
 
Lorem ipsum dolor sit amet <br> 
 
Consectetuer augue nibh lacus at <br> 
 
Pretium Donec felis dolor penatibus <br> 
 
Phasellus consequat Vivamus dui lacinia <br> 
 
Ornare nonummy laoreet lacus Donec <br> 
 
Ut ut libero Curabitur id <br> 
 
Dui pretium hendrerit sapien Pellentesque <br> 
 
Lorem ipsum dolor sit amet <br> 
 
Consectetuer augue nibh lacus at <br> 
 
Pretium Donec felis dolor penatibus <br> 
 
Phasellus consequat Vivamus dui lacinia <br> 
 
Ornare nonummy laoreet lacus Donec <br> 
 
Ut ut libero Curabitur id <br> 
 
Dui pretium hendrerit sapien Pellentesque <br> 
 
Lorem ipsum dolor sit amet <br> 
 
Consectetuer augue nibh lacus at <br> 
 
Pretium Donec felis dolor penatibus <br> 
 
Phasellus consequat Vivamus dui lacinia <br> 
 
Ornare nonummy laoreet lacus Donec <br> 
 
Ut ut libero Curabitur id <br> 
 
Dui pretium hendrerit sapien Pellentesque <br> 
 
Lorem ipsum dolor sit amet <br> 
 
Consectetuer augue nibh lacus at <br> 
 
Pretium Donec felis dolor penatibus <br> 
 
Phasellus consequat Vivamus dui lacinia <br> 
 
Ornare nonummy laoreet lacus Donec <br> 
 
Ut ut libero Curabitur id <br> 
 
Dui pretium hendrerit sapien Pellentesque <br> 
 
Lorem ipsum dolor sit amet <br> 
 
Consectetuer augue nibh lacus at <br> 
 
Pretium Donec felis dolor penatibus <br> 
 
Phasellus consequat Vivamus dui lacinia <br> 
 
Ornare nonummy laoreet lacus Donec <br> 
 
Ut ut libero Curabitur id <br> 
 
Dui pretium hendrerit sapien Pellentesque <br> 
 
</div> 
 

 
<script> 
 

 
jQuery(
 
    function($) 
 
    { 
 
    $('#content').bind('scroll', function() 
 
           { 
 
           if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight()) 
 
           { 
 
            $('#container').focus(); 
 
           } 
 
           }) 
 
    }) 
 
    
 
    </script>

唯一的錯誤，因爲它綁定到內容項的情況下滾動，

$('#content').bind('scroll', function() ..... 

和示例檢測全滾動：

if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) 

這是一個正確的方式來檢測完整卷軸在mi nd塊高 但是 對於你的情況，你會注意到有時你需要滾動，當你還沒有時，執行jquery並改變焦點。你總是可以改善這一點，但有點你正在尋找。隨意問你需要什麼。