我怎样才能继续正常滚动滚动溢出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并改变焦点。你总是可以改善这一点，但有点你正在寻找。随意问你需要什么。