Полоса прокрутки над контентом

12 августа 2013

По умолчанию, overflow-x:scroll добавляет скролл в нижней части блока, в котором требуется прокрутка. Что не всегда удобно.

Под катом простенький jQuery скрипт, который позволит добавить дублирующий скроллбар сверху блока.

if($('.h_scroll').length > 0) {
	$.each($('.h_scroll'), function(key, h_scroll) {
		var wdth = $(h_scroll).find('.h_scroll_content').width();
		if(wdth>960) {
			var b_scroll = $('<div style="overflow-x:scroll;width:960px"/>');
			var b_cont = $('<div style="height:1px"></div>').width(wdth);
			b_scroll.append(b_cont);
			b_scroll.scroll(function(){
				$(h_scroll).scrollLeft(b_scroll.scrollLeft());
			});
			$(h_scroll).before(b_scroll);
			$(h_scroll).scroll(function(){
				b_scroll.scrollLeft($(h_scroll).scrollLeft());
			});
		}
	});
}

Где .h_scroll - класс блока со скроллом; .h_scroll_content - блок, который определяет размер контента.

Пример разметки:

<div class="h_scroll">
	<div class="h_scroll_content"> .... широкий контент ... </div>
</div>
Теги: jQuery

2 комментария

  • Prosher 11 октября 2017 14:43
    На ПК эта фишка работает нормально, но как только открываю свой сайт на андроиде, скрола сверху не видно. Без разницы, планшет или смартфон.
    Пробовал в Хроме, Опере, UCBrowser и Личиске...
    • Eugen Nichikov Hardman 11 октября 2017 14:53
      На Андроиде скроллбары отображаются по-другому, поэтому и не видно.
      Да и свайпом скроллить гораздо удобнее, поэтому такой вариант вообще не имеет смысла.

Написать комментарий