使用jQuery在鼠标上拖动时垂直滚动页面并在div中水平滚动大图像

Question

I have page that I want to scroll vertically on event mouse down, and I already have found the answer on this question link . 我有要在事件鼠标上向下垂直滚动的页面，并且已经在此问题链接上找到了答案。 In my case i have a div that contain image that user put on it and sometimes it have bigger size than my div size, with overflow:auto; 在我的情况下，我有一个div ，其中包含用户放置的图像，有时它的大小大于我的div大小，并带有overflow:auto; i get horizontal scroll inside that div. 我在该div内获得水平滚动。 So i need to apply drag scroll horizontally on that div. 因此，我需要在该div上水平应用拖动滚动。

HTML HTML

<html>
  <body>
    <div id="container">
      <div class="detail-title"> TITLE </div>
      <div class="detail-content">
         <img src="...." />
         !-- long content --!
      </div>
    </div>
  </body>
</html>

CSS CSS

.detail-main-content-box {
    background: none;
    display: block;
    left: 0;
    min-height: 350px;
    overflow: auto;
    padding: 5px 5px 5px 5px;
    width: auto;
}

jQuery from answer link jQuery从答案链接

$(document).on({
    'mousemove': function (e) {
        clicked && updateScrollPos(e);
    },
    'mousedown': function (e) {
        clicked = true;
        clickY = e.pageY;
        $('html').addClass('block-selection').css({ 'cursor': 'url(../img/closedhand.cur), default' });
    },
    'mouseup': function () {
        clicked = false;
        $('html').removeClass('block-selection').css('cursor', 'auto');
    }
});

var updateScrollPos = function(e) {
    $(window).scrollTop($(window).scrollTop() + (clickY - e.pageY));
};

how can i apply this on div? 我该如何在div上应用它？ i have try to change $(document) to $('.detail-content') also change function scrollTop to scrollLeft but nothing happen. 我已经尝试将$(document)更改$(document) $('.detail-content')也将功能scrollTop更改为scrollLeft但没有任何反应。 Here is the fiddle for current condition. 这是当前情况的小提琴。

Answer 1

this has been left here unanswered for two long years, not even a useful comment. 这已经有两年没有回答了，甚至没有什么有用的评论。 OK, here is my try. 好，这是我的尝试。 hope it can help ( le roi est mort vive le roi) 希望能对您有所帮助（le roi est mort vive le roi）

<script type="text/javascript">

    var clicked = true;
    var clickY = e.pageY;
    $('.detail-content').on({
        'mousemove': function (e) {
            clicked && updateScrollPos(this,e);

        },
        'mousedown': function (e) {
            clicked = true;
            clickY = e.pageY;
            $('html').addClass('block-selection').css({ 'cursor': 'grabbing' });
        },
        'mouseup': function () {
            clicked = false;
            $('html').removeClass('block-selection').css('cursor', 'auto');
        }
    });

    var updateScrollPos = function(obj,e) {
        $(obj).scrollTop($(obj).scrollTop() + (clickY - e.pageY));
        clickY = e.pageY;
    };

</script>

使用jQuery在鼠标上拖动时垂直滚动页面并在div中水平滚动大图像

问题描述

1 个解决方案

解决方案1
0 2016-02-23 23:26:29

使用jQuery在鼠标上拖动时垂直滚动页面并在div中水平滚动大图像

问题描述

1 个解决方案

解决方案1 0 2016-02-23 23:26:29

解决方案1
0 2016-02-23 23:26:29