用鼠标滚轮控制横向滚动条滚动的几种方法
一直以来，鼠标滚轮能控制页面滚动条的上下滚动及垂直滚动，如果需要对水平滚动条进行滚动呢，必须鼠标按住滚动条拖动，那么如何实现鼠标滚轮控制滚动条水平横向滚动呢，今天揭秘2种方式.
1、用js自带的wheel捕获方法
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
padding: 0;
margin: 0;
}
main {
position: relative;
width: 100vw;
height: 100vh;
-webkit-overflow-scrolling: touch;
}
.wrapper {
display: flex;
flex-direction: row;
align-items: flex-start;
flex-wrap: nowrap;
width: auto;
}
.wrapper > div {
pointer-events: none;
flex: 0 0 auto;
width: 100vw;
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body translate="no">
<main style="overflow: scroll hidden;">
<div class="wrapper">
<div style="background-color:red"></div>
<div style="background-color:blue"></div>
</div>
</main>
<script>
var item = document.getElementsByTagName('MAIN')[0];
window.addEventListener('wheel', function (e) {
if (e.deltaY > 0) item.scrollLeft += 100; else
item.scrollLeft -= 100;
});
</script>
</body>
</html>2、使用mousewheel插件捕获<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery.mousewheel.js"></script>
<style>
body {
padding: 0;
margin: 0;
}
main {
position: relative;
width: 100vw;
height: 100vh;
-webkit-overflow-scrolling: touch;
}
.wrapper {
display: flex;
flex-direction: row;
align-items: flex-start;
flex-wrap: nowrap;
width: auto;
}
.wrapper > div {
pointer-events: none;
flex: 0 0 auto;
width: 100vw;
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body translate="no">
<main style="overflow: scroll hidden;">
<div class="wrapper">
<div style="background-color:red"></div>
<div style="background-color:blue"></div>
</div>
</main>
<script>
$(function() {
$("main").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);
event.preventDefault();
});
});
</script>
</body>
</html>
{{collectdata}}
网友评论0