滚动到溢出div底部后，如何继续正常滚动 [英] How can I continue normal scroll after scrolling to the bottom of an overflow div

问题描述

此页面使用了一个溢出框，因此您可以滚动浏览内容：

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

如果您滚动到该内容的底部，则滚动会卡在该框中，直到您将光标移出框并滚动页面的其余部分（示例中的元素被设置为position：fixed，但是删除该规则仍然有相同的结果）

这发生在我身上的任何具有定义高度和溢出的div：auto;

 < style> 
 div {
 overflow：auto; 
 height：100px; 
} 
< / style> 
 
< div> 
溢出是自动的，如果我添加超过高度的内容，我可以滚动
< / div> 
  

我怎样才能让它在滚动到溢出div的底部后返回自动滚动实际页面？

解决方案

JQuery解决方案

首先检查这个JS函数：

  $（）。scrollTop（）//知道已经有多少滚动
 $（）。innerHeight（）//知道元素的内部高度
 DOMElement.scrollHeight //知道DOM元素内容的高度
  

现在让我向您展示一个片段，其中使用了在达到DOM元素内容末尾时检测到的函数，可能是div，然后将焦点更改为主容器。从这里继续滚动。

#mycontainer {position：absolute; background： #CCCCCC;溢出：自动;身高：140px; width：700px;}＃mycontent {position：relative; display：block; margin：0 auto; background：#aaaaaa;溢出：自动; 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> 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& Phasell我们以鲜活的形式奉献给Vivamus dui lacinia< br> Ornare nonummy laoreet lacus Donec< br> Ut ut libero Curabitur id< br>< br> Pellentesque< / div> Lorem ipsum dolor sit amet< br> Consectetuer将neib lacus加入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< ;> Ornare nonummy lao reet lacus Donec< br> Ut ut libero Curabitur id< br> Dui pretium hendrerit sapien Pellentesque< br> Lorem ipsum dolor sit amet< br> Consectetuer auggest nibh lacus at< br> Pretium Donec felis dolor penatibus< > 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> 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>对准pretiu （函数（$）{$（'＃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）
  

这是一个正确的方式来检测完整的滚动记住块高度
BUT
对于你的情况，你会注意到有时你需要滚动，当你还在执行jquery并改变焦点时，你总是可以改进它，但有点儿你可以随时问你需要什么。

This page uses an overflow box so you can scroll through content:

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

If you scroll to the bottom of that content, your scroll is stuck in that box until you move your cursor out of the box and scroll through the rest of the page.(the element in the example is set to position:fixed, but removing that rule still has the same result)

And this happens to me for any div with defined height and overflow: 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>

How can I make it so that, after scrolling to the bottom of an overflow div, it returns to scrolling the actual page automatically?

解决方案

JQuery solution

First check this JS functions:

$().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

Now let me show you a snippet where using the functions it detects when you have reached the end of the content of a DOM element, as could be a div, and then change the focus to the main container. To continue scrolling from there.

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

The only wrong, as it is binded to the event scroll of the content item,

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

and the example detects full scroll with:

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

It is a right way to detect full scroll having in mind the block height BUT For your situation, you will notice sometimes you need to scroll, when you are down yet, to execute the jquery and change the focus. You can always improve this but is a bit of what you are looking for. Feel free to ask what you need.

这篇关于滚动到溢出div底部后，如何继续正常滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！