Malleys,
насколько правильно, сделать например, так?
<!DOCTYPE html>
<html>
<head>
<title>jQuery scroll example</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<style>
body {
background: #20262E;
font-family: Helvetica Neue;
}
.wrap-box {
width: 290px;
height: 290px;
background: #777;
margin: 10px;
}
body, html {
height: 100%;
margin: 0;
}
.wrap {
overflow: auto;
border: 1px solid red;
box-sizing: border-box;
height: 100%;
}
.wrap-content {
overflow: hidden;
}
.boxes{
transition: transform 1.8s cubic-bezier(0.47, 0, 0.745, 0.715);
}
</style>
<script>
window.onload = function() {
for (var i = 0; i < 100; i++) {
$(".boxes").append('<div class="wrap-box">' + (1 + i) + "</div>");
}
var _top = 0;
var top = 0;
var scrollTop = 0;
var timer;
$(".wrap").scroll(function() {
_top = this.scrollTop;
scrollTop = _top - top;
window.clearTimeout(timer);
$(".boxes").css({"transform":"translateY(" + scrollTop + "px)", "transitionDuration":"0ms"});
timer = window.setTimeout(function() {
$(".boxes").css({"transform":"translateY(0px)", "transitionDuration":""});
top = _top;
}, 100);
});
};
</script>
</head>
<body>
<div class="wrap">
<div class="wrap-content">
<div class="boxes"></div>
</div>
</div>
</body>
</html>