qq_16026045
[廾匸]
2017-10-23 09:47
采纳率: 75%
浏览 4.1k
已采纳

按住鼠标左键左右移动怎么随着滚动条跟着滚动

当一个div高度定死,宽度100%,超出就左右滚动:

 #dv{
        height: 300px;
        overflow-x: auto;
    }

请看效果:这个效果不是拖动滚动条的,而是鼠标按住里面的div左右拖动的效果
鼠标按着div左右拖动效果

鼠标点击div按住不放然后左右拖动,滚动条也跟着滚动,怎么实现,请帖代码,谢谢~
请大神们解决~

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

5条回答 默认 最新

  • showbo
    已采纳

    鼠标事件中中获取鼠标移动估计设置容器scrollLeft而已,很简单啊。。

    点赞 评论
  • m0_37716624
    秦雅酒食 2017-10-24 03:15

    创建一个id为menu_zdd的盒子
    document.getElementById("menu_zdd").style.position="absolute"; document.getElementById("menu_zdd").style.top=(parseInt(document.documentElement.clientHeight,10)/2)+parseInt(document.documentElement.scrollTop,10)-50+"px";

    document.getElementById("menu_zdd").style.left=((parseInt(document.documentElement.clientWidth,10)/2)-190)+"px";
    大致上就是这个思路,动态获取位置

    点赞 评论
  • qq_37524684
    子幽 2017-10-24 03:20
      <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <meta content="text/html; charset=utf-8" />
    <style type="text/css">
       #a{
           margin: auto;
            height:80px;
            width:500px;
            background-color: green;
            overflow-x: scroll;
            overflow-y: hidden;
        }
        #b{
            height:80px;
            width:1000px;
            background-color: red;
        }
    </style>
    </head>
    <body>
      <div>
        <div id="a">
           <div id="b">
    
            </div>
        </div>
      </div>
        <script>
    
        </script>
    </body>
    </html>
    
    点赞 评论
  • qq_16026045
    [廾匸] 2017-10-24 10:04

    自己搞定了。。。。。

     <script>
        window.onload = function () {
            var dv = document.getElementById('projList'), ox;
            //上一次的位置 scrollLeft
            var last_left = 0;
            dv.onmousedown = function (e) {
                dv.onmousemove = mousemove;
                dv.onmouseup = mouseup;
                e = e || window.event;
                //如果上次有记录
                if(last_left > 0 ){
                    //就减掉上次的距离
                    ox = e.clientX-last_left;
                }else{
                    ox = e.clientX- dv.scrollLeft;
                    ox = e.clientX;
                }
                dv.className = 'projList';
            };
            function mousemove(e) {
                e = e || window.event;
                last_left = e.clientX - ox;
                dv.scrollLeft = e.clientX - ox;
            }
            function mouseup() {
                dv.className = '';
                dv.onmouseup = dv.onmousemove = null;
            }
    
        }()
    </script>
    

    还要设置这个div的样式
    .projList{
    width:100%;
    height:300px;
    cursor: move;
    overflow-x:auto;
    }

    点赞 评论
  • sreddouilyongxia
    面向对象的夜猫子 2017-10-25 01:28

    楼上说的对 ,鼠标的左右键事件,浏览器的左右滚轮事件就可以实现了。

    点赞 评论

相关推荐