10 декабря 2011, 20:16

Скролл сверху и снизу блока

Wow, who is back. Да — это я с новым ДОУ (deer.org.ua, lol)

Разминка для мозгов :)
<style type="text/css">
  #doublescroll { overflow: auto; overflow-y: hidden; }
  #doublescroll p { margin: 0; padding: 1em; white-space: nowrap; }
</style>

<div id="doublescroll">

  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
    enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat.
  </p>
</div>

<script type="text/javascript">
function DoubleScroll(element) {
    var scrollbar= document.createElement('div');
    scrollbar.appendChild(document.createElement('div'));
    scrollbar.style.overflow= 'auto';
    scrollbar.style.overflowY= 'hidden';
    scrollbar.firstChild.style.width= element.scrollWidth+'px';
    scrollbar.firstChild.style.paddingTop= '1px';
    scrollbar.firstChild.appendChild(document.createTextNode('\xA0'));
    scrollbar.onscroll= function() {
      element.scrollLeft= scrollbar.scrollLeft;
    };
    element.onscroll= function() {
      scrollbar.scrollLeft= element.scrollLeft;
    };
    element.parentNode.insertBefore(scrollbar, element);
  }

  DoubleScroll(document.getElementById('doublescroll'));
</script>

Код честно взят со стакексчендж (стаковерфлоу раньше). Я просто сделал с него джиквери решение
$("#doublescroll")
	.before($("<div></div>")
		.append($("<div></div>")
  			.css({
  				"padding-top":"1px",
  				"width": $("#doublescroll")[0].scrollWidth+"px"
  			})
  			.text('\xA0')
  		)
		.css({
			"overflow":"auto",
			"overflowY":"hidden"
		}).
		bind("scroll",function(){
			$("#doublescroll")[0].scrollLeft = $(this)[0].scrollLeft;
		})
	)
	.bind("scroll",function(){
		$(this).prev()[0].scrollLeft = $(this)[0].scrollLeft;
	})

Примера не будет, мне лень.

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

Deerua
Тест комментариев
Пример находится в http://deer.org.ua/samples/doublescroll/
CTAPbIu_MABP
надо будет над кем-то зло пошутить перевернув скроллинг
Vitaliy Bogdanets
инвертнуть, хм, интересно :)
найти хсс и загнаться

Ваш комментарий

адрес не будет опубликован

ХТМЛ не работает


Ctrl + Enter