自定义滚轮事件_修改滚轮事件-CSDN博客

本文链接：https://blog.csdn.net/WgGaopeng/article/details/75912769

<!DOCTYPE html>

<html>

<head>

<title>自定义滚轮事件</title>

margin: 0;

padding: 0;

}

#wrap{

width: 300px;

height: 500px;

border: 2px solid red;

overflow: hidden;

position: relative;

}

#content{

width: 300px;

position: absolute;

left: 0;

top: 0;

margin-right: 6px;

}

#content > img{

width: 294px;

height: 500px;

/*去除图片间的间隙*/

vertical-align: top;

}

#sliderWrap{

width:16px;

height: 100%;

background-color: blue;

position: absolute;

right: 0;

top: 0;

}

#slider{

width: 10px;

height: 50px;

background-color: orange;

border-radius: 5px;

position: absolute;

right: 3px;

top: 0;

}

</style>

</head>

<body>

</div>

</div>

</body>

var wrap = document.getElementById("wrap");

var content = document.getElementById("content");

var sliderWrap = document.getElementById("sliderWrap");

var slider = document.getElementById("slider");

// alert(content.clientHeight);

//设置比例

var scale = wrap.clientHeight / content.clientHeight;

//设置滑块的高度

var h1 = sliderWrap.clientHeight * scale;

//为了合理设置高度,设置滑块的最小高度

if (h1 < 50) {

h1 = 50;

}else if(h1 >= sliderWrap.clientHeight){

//当前内容能够完全显示在可视范围以内,不需要滚动条

sliderWrap.style.display = "none";

}

//设置滑块的高度

slider.style.height = h1 + "px";

//设置y轴的增量

var y = 0;

//为wrap添加滚轮事件

wrap.onmousewheel = function (e){

var event1 = event || e;

console.log(event1.wheelDelta);

if (event1.wheelDelta < 0) {

console.log("向上滚动!");

y += 5;

}else if(event1.wheelDelta > 0){

console.log("向下滚动!");

y -= 5;

}

//y变化时,说明在滚动,此时使滚动条发生滚动,以及设置content内容部分滚动

//设置极端情况,滑块不能滚出屏幕

if (y <= 0) {

//滑块最多滑到顶部

y = 0;

}else if (y >= sliderWrap.clientHeight - slider.clientHeight) {

//滑块最多滑到最底部

y = sliderWrap.clientHeight - slider.clientHeight;

}

//更新滑块的位置

slider.style.top = y + "px";

//更新内容显示区域部分

//得到比例

var scaleY = y / sliderWrap.clientHeight;

//通过相对比例,得到相对可视位置区域内容

content.style.top = -content.clientHeight * scaleY + "px";

}

</script>

</html>