は、どのように私はあなたがコンテンツをスクロールすることができますので、このページでは、オーバーフローボックスを使用してオーバーフローのdiv

Question

の一番下までスクロールした後、通常のスクロールを継続することができます。

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

あなたはそのコンテンツの下までスクロールすると、カーソルをボックスの外に移動して残りのページをスクロールするまでスクロールします（この例の要素は固定されていますが、そのルールを削除しても同じ結果が得られます）

これは、高さとオーバーフローが定義されたdivの場合、私に起こります。

<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のフルスクロールを検出するには正しい方法ですブロックの高さを BUT 状況に応じて、jqueryを実行してフォーカスを変更するためにスクロールする必要があることがあります。あなたはいつもこれを改善することができますが、あなたが探しているもののビットです。お気軽にお問い合わせください。