javascript - スクロールバーが表示または非表示になったときにサイズ変更イベントが発生しないのはなぜですか?

Question

ブラウザの垂直スクロールバーが表示または非表示になると、ビューポートまたはブラウザ ウィンドウの幅が変更されます (jQuery の $(window).width() メソッドを使用してテストできます) が、ウィンドウのサイズ変更イベントはトリガーされません。どうして？

Answer 1

サイズ変更は、実際のブラウザ ウィンドウのサイズ変更によって発生するイベントです。

コンテンツが画面に収まるまでページから要素を削除したらどうなりますか? それはウィンドウのサイズ変更ではありません。または、ページのオーバーフローを非表示に変更した場合。スクロール バーは消えますが、これもサイズ変更ではありません。

私が得ているのはこれです：スクロールバーの可視性は、必ずしもサイズ変更イベントがあったことを意味するわけではありません.

Answer 2

サイズ変更の代わりに、overflowchanged イベントを使用します。

Answer 3

ブラウザはサイズ変更として認識しません。次に、「スクロールバーが表示された」イベントと「スクロールバーが消えた」イベントが必要な場合は、次のコードを使用します。

<div id="footerDiv" style="float: left; height: 1px; width: 100%;"></div>



bodywidth = 0;

$(document).ready(function () {

    bodywidth = $("#footerDiv").width();
    setInterval(scrollbarHelper, 100);

});

function scrollbarHelper() { 

    var newwidth = $("#footerDiv").width();

    if (bodywidth !== newwidth) {

        if (bodywidth > newwidth) {
            alert("Scrollbar Appeared");
            // Your code here
        }
        else if (bodywidth < newwidth) {
            alert("Scrollbar Disppeared");
            // Your code here
        }

        bodywidth = newwidth;
    }
}