<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
#my_elem{
width: 100%;
height: 300px;
background: #eee;
position: relative;
/* display: flex;
align-items: center;
justify-content: center; */
overflow: auto;
}
#qwerty{
width: 60px;
height: 50px;
background: red;
margin: 0 auto;
margin-top: 60px;
position: relative;
/* transform: scaleX(2); */
}
#qwerty p{
position: absolute;
bottom: 0;
}
</style>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/jquery.mousewheel.js"></script>
</head>
<body style="height:2000px;">
<div id="my_elem">
<div id="qwerty">
<p style="left:0%;">0%</p>
<p style="left:25%;">25%</p>
<p style="left:50%;">50%</p>
<p style="left:75%;">75%</p>
<p style="left:100%;">100%</p>
</div>
</div>
<script>
var aaa=2;
var bbb=60;
var ccc=10;
// using bind方法1
$('#qwerty').bind('mousewheel', function(event, delta, deltaX, deltaY) {
if (window.console && console.log) {
console.log(111,delta, deltaX, deltaY);
if(delta == 1){
aaa -= 0.1;
bbb -= 10;
ccc -= 2;
// $('#qwerty').css({'transform': 'scaleX('+aaa+')'})
// $('#qwerty').css({'width': bbb+'px'})
$('#qwerty').css({'width': ccc+'%'})
}else if(delta == -1){
aaa += 0.1;
bbb += 10;
ccc += 2;
// $('#qwerty').css({'transform': 'scaleX('+aaa+')'})
// $('#qwerty').css({'width': bbb+'px'})
$('#qwerty').css({'width': ccc+'%'})
}
}
// event.stopPropagation();
event.preventDefault();//当前滚动条滚动,整体页面不动
});
// using the event helper方法2
// $('#my_elem').mousewheel(function(event, delta, deltaX, deltaY) {
// if (window.console && console.log) {
// console.log(222,delta, deltaX, deltaY);
// }
// });
</script>
</body>
</html>
附带滚动条加载的js:链接:https://pan.baidu.com/s/1zkiD7FKcIHlHC6y8nDmMzQ
提取码:eh4l