Scroll the page vertically and scroll big image inside div horizontally on mouse drag with jQuery

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; i get horizontal scroll inside that div. So i need to apply drag scroll horizontally on that 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 from answer link

$(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? i have try to change $(document) to $('.detail-content') also change function scrollTop to scrollLeft but nothing happen. Here is the fiddle for current condition.

please check the link at the bottom, i have updated my question.. — Dion Dirza, Jan 21 '14 at 08:19

score 0 · Answer 1 · answered Feb 23 '16 at 23:26

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)

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

Scroll the page vertically and scroll big image inside div horizontally on mouse drag with jQuery

1 Answers1