<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div
{
width: 557px;
height: 200px;
background-image: url("38-.jpg");
}
</style>
</head>
<body>
<div></div>
<script>
var div=document.querySelector("div");
var num=0;
div.addEventListener("mousewheel",mouseWheelHanlder);
function mouseWheelHanlder(e) {
num+=(e.deltaY>0 ?10 : -10);
if(num>=0) num=0;
if(num<-768+div.offsetHeight) num=-768+div.offsetHeight;
div.style.backgroundPositionY=num+"px";
}
</script>
</body>
</html>