body のスクロールイベントは window on scroll では取れない

by zu_min_com

HTML

<button id="toggleButton">スクロールバーを付け替える</button>
<div class="long-obj"></div>

CSS

html {
    height: 100%;
    overflow: auto;
}
body {
    background-color: rgba(255, 255, 255, 0.8);
    margin: 10px;
}
body.toggle {
    height: 80%;
    overflow: auto;
}
.long-obj {
    height: 3000px;
}
#toggleButton {
    position: fixed;
    top: 0px;
    left: 0px;
}

JavaScript

// スクロールすると色が変わるもの
var i = 0;
var coloring = function () {
    i = i % (256*3);
    var a = Math.max(0, Math.min(256, i));
    var b = Math.max(0, Math.min(256, i - 256));
    var c = Math.max(0, Math.min(256, i - (256 * 2)));
    $('html').css('background-color', 'rgb('+(256 - a + c)+', '+(a - b)+', '+(b - c)+')');
}
$(window).on('scroll', function () {
    i += 4;
    coloring();
});
coloring();

// body のスタイル変更
$('#toggleButton').on('click', function () {
    $('body').toggleClass('toggle');
});