Question

我有一个页面，我想在事件鼠标按下时垂直滚动，我已经找到了这个question link的答案。在我的情况下，我有div包含用户放在其上的图像，有时它的大小比我的div大小更大，overflow:auto;我在该div内得到水平滚动。所以我需要在该div上水平拖动滚动。

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

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

来自回答链接的

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));
};

我怎么能在div上应用这个？我尝试将$(document)更改为$('.detail-content')，同时将函数scrollTop更改为scrollLeft，但没有任何反应。这是当前条件的fiddle。

Answer 1

这已经有两年没有得到答复，甚至没有一个有用的评论。好的，这是我的尝试。希望它可以提供帮助（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 个答案: