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），然后将焦点更改为主容器。继续从那里滚动。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

唯一错误，因为它绑定到内容项的事件滚动

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

并且该示例使用以下内容检测完整滚动：

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

这是一种检测完整滚动的正确方法，考虑到块高度的 BUT 对于您的情况，您会注意到有时您需要滚动，当您关闭时，执行jquery并更改焦点。你可以随时改进这一点，但有点你正在寻找。随意问你需要什么。

滚动到溢出div的底部后，如何继续正常滚动

1 个答案: