Прокрутите страницу по вертикали и прокрутите большое изображение внутри div по горизонтали на перетаскивание мышью с помощью jQuery

У меня есть страница, которую я хочу прокрутить по вертикали на мыши на мыши, и я уже нашел ответ на этом question link. В моем случае у меня есть div, которые содержат изображение, которое пользователь надел на него, и иногда он имеет больший размер, чем мой размер div, с overflow:auto; я получаю горизонтальный прокрутки внутри этого div. Поэтому мне нужно применить drag scroll горизонтально на этом div.Прокрутите страницу по вертикали и прокрутите большое изображение внутри div по горизонтали на перетаскивание мышью с помощью jQuery

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.

источник

2014-01-21 Dion Dirza

Не могли бы вы сделать скрипку? – monners

, пожалуйста, проверьте ссылку внизу, я обновил свой вопрос .. –

Это оставлено здесь без ответа в течение двух долгих лет, даже не полезный комментарий. Хорошо, вот моя попытка. надеюсь, что это может помочь (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>

источник

2016-02-23 23:26:29 milevyo

Прокрутите страницу по вертикали и прокрутите большое изображение внутри div по горизонтали на перетаскивание мышью с помощью jQuery

ответ

Смежные вопросы