Показать сообщение отдельно
  #1 (permalink)  
Старый 09.09.2016, 16:58
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 219

Как изменить скрипт горизонтальной прокрутки?
Добрый день! Как можно изменить скрипт горизонтальной прокрутки? А именно избежать использование в стиле свойства white-space. Огромное спасибо за помощь!

var $hor = $("#horizontal");

$("body").css('padding-bottom', $hor[0].scrollLeft = $hor[0].scrollWidth - $hor.outerWidth());

$(window).on('scroll', function () {
  var top = $(document).scrollTop();
  var width = $hor[0].scrollWidth - $hor.outerWidth();
  var lim = $hor.position().top - (width - $hor[0].scrollLeft) - ($(window).height() - $hor.outerHeight()) / 2;
  var delta = Math.min(Math.max(top - lim, 0), width);

  $hor[0].scrollLeft = width - delta;
  $("body").css({'padding-top': delta, 'padding-bottom': width - delta});
});


<style>
#horizontal {
  white-space: nowrap;
  font-size: 3em;
  overflow: hidden;
  margin: 0;
}

#horizontal > div {
  display: inline-block;
  width: 100%;
  white-space: normal;
}
</style>
<p></p>
<div id="horizontal">
<div style="background:silver">Как изменить скрипт горизонтальной прокрутки?</div>
<div style="background:antiquewhite">Как изменить скрипт горизонтальной прокрутки?</div>
</div>
<p></p>

Последний раз редактировалось LADYX, 09.09.2016 в 23:36. Причина: Дополнил код
Ответить с цитированием