Scrollbar vs scrollbar synced with rquestAnimationFrame

by tabalinas

HTML

<div class="scroll">
    <div class="content"></div>
</div>
<div class="scroll-native">
    <div class="content"></div>
</div>

CSS

.scroll, .scroll-native {
    height: 500px;
    width: 200px;
    overflow-y: scroll;
    float: left;
    margin-left: 50px;
}
.content {
    background: linear-gradient(to bottom, white, black);
    height: 1000%;
}

JavaScript

var wasWheel = false;
var markWheelEvent = function(){
    wasWheel = false;
    window.requestAnimationFrame(markWheelEvent);
};
window.requestAnimationFrame(markWheelEvent);

$(".scroll").on("mousewheel", function(e) {
    if(wasWheel) {
        e.preventDefault();
    }
    wasWheel = true;
});