Мне надо было сделать возможность прокрутки дива внутри другого дива по горизонтали. Для этого воспользуемся известным приемом из CSS и HTML
Много много контента
стили вынес в html для наглядности. Внутренний див в 10 раз шире внешнего, поэтому промотать обязательно придется. А теперь внимание. При небольшой высоте контейнера, пользователь сразу увидит внизу скроллер и потянет за него, а если высота большая, больше высоты страницы? Тогда надо будет опуститься вниз до скроллера, перемотать и снова подняться вверх по странице. Очень не юзабельно. Но слава богу, помимо html и css есть JavaScript. Сразу полез искать код, но почему-то не нашел простой реализации без плагинов и лишнего кода. Поэтому пришлось написать свою версию.
jQuery(document).ready(function(){ var clicked = false, base = 0, base_scroll = 0; $('.scroll_me').on({ mousemove: function(e) { clicked && function(xAxis) { var _this = $(this); $('.scroll_wrap').scrollLeft( base_scroll + base - xAxis ) }.call($(this), e.pageX); }, mousedown: function(e) { clicked = true; base = e.pageX; base_scroll = $('.scroll_wrap').scrollLeft() }, mouseup: function(e) { clicked = false; } }) });
Если вкратце пояснить код, то мы запоминаем координаты мыши на mousedown и текущий сдвиг внутреннего контейнера. А при движении мышью, производим необходимый сдвиг в направлении нового положения курсора.
А для того, чтобы пользователям было сразу понятно, что можно прокручивать влево-вправо, изменил CSS стиль курсора мыши следующим образом:
.scroll_me{ cursor: ew-resize; }
Надеюсь веб-разработчикам приём, описанный выше, будет полезен. Приведенный выше код я использовал для прокрутки турнирной таблицы на сайте oball.ru. В виду того, что при большом количестве команд, разместить всех на одном листе невозможно и надо использовать скроллинг. Посмотреть на пример можно например в тестовом турнире по пляжному волейболу здесь.