jq滚动条事件

最新推荐文章于 2024-06-11 15:23:22 发布

theOtherSky

最新推荐文章于 2024-06-11 15:23:22 发布

阅读量900

点赞数

分类专栏：前端技巧

本文链接：https://blog.csdn.net/qq_35181466/article/details/88658925

版权

前端技巧专栏收录该内容

41 篇文章 1 订阅

订阅专栏

<!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

theOtherSky

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq滚动条事件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=...
复制链接

扫一扫

专栏目录