Как изменить скрипт горизонтальной прокрутки?
Добрый день! Как можно изменить скрипт горизонтальной прокрутки? А именно избежать использование в стиле свойства 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,
макет в сборе попробуйте сделать, иначе непонятно как влияет white-space |
Цитата:
|
LADYX,
а какой эффект вы хотите получить в результате? |
На примере этой страницы - http://recruit.aif.ru/#id=3 Во время вертикальной прокрутки страницы как колесиком мыши, так и скроллингом, когда доходим до блока с узкой горизонтальной фотографией, страница останавливается с центрированием фотографии по вертикали страницы, и начинается горизонтальная прокрутка контента внутри этой фотографии, после чего продолжается вертикальная прокрутка страницы.
|
скрипт для эффекта с горизонтальной прокруткой при вертикальном скроле
LADYX,
возможный вариант ... и не могли бы вы удалить код растянуший страницу
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var $hor = $("#horizontal");
$("body").css('padding-bottom', $(window).width()*2);
var delta = 0;
$(window).on('scroll', function () {
var top = $(document).scrollTop();
var width = $(window).width();
var lim = $hor.position().top - (delta ) - ($(window).height() - $hor.outerHeight()) / 2;
delta = Math.min(Math.max(top - lim, 0), width * 2);
$("div:first", $hor).css({left : delta});
$("div:last", $hor).css({left : -(width*2 - delta)});
$("body").css({'padding-top': delta, 'padding-bottom': width*2 - delta});
});
});
</script>
</head>
<body>
<style>
#horizontal {
position: relative;
width: 100%;
font-size: 2em;
border: 1px solid #0000FF;
margin: 0;
overflow: hidden;
height: 150px;
}
#horizontal > div {
width: 100%;
position: absolute;
left: -100%;
top:25%;
}
p{
height: 1000px;
}
</style>
<p></p>
<div id="horizontal">
<div style="background:silver">Как изменить скрипт горизонтальной прокрутки?1</div>
<div style="background:antiquewhite">Как изменить скрипт горизонтальной прокрутки?2</div>
</div>
<p></p>
</body>
</html>
|
рони
Код, который растягивал страницу, удалил. Ваш код буду пробовать использовать. И хотел бы вам сказать огромное спасибо за помощь! |
Да, у меня все работает! Ура!
рони Огромное спасибо за помощь! Желаю вам Удачи! |
рони,
Я дико извиняюсь! Попробовал использовать прокрутку в блоках. И не могу понять, у меня не получается. Первый блок виден, а второй хоть тресни, ну не прокручивается он, и все тут! Я вот набросал, посмотрите, пожалуйста, что я делаю не так, где моя ошибка. Еще раз прошу прощения https://jsfiddle.net/LADYX/3ep4pha5/ |
LADYX,
укажите селекторы перемещаемых блоков
$(".horizontal:first", $hor).css({left : delta});
$(".horizontal:last", $hor).css({left : -(width*2 - delta)});
|
рони,
Вот блин, я прошу прощения, действительно, я ведь использовал класс .horizontal, а не просто div. Мог бы конечно и сам сделать, это просто моя невнимательность, уперся в стиль, и даже не догадался посмотреть код скрипта. Я еще раз прошу у вас прощения за лишнее беспокойство. Спасибо вам большое! |
рони,
прошу прощения, обратил внимание, что в браузере internet explorer блок с горизонтальной прокруткой пляшет сверху донизу как ненормальный. Как можно это исправить? Спасибо. |
LADYX,
наверно можно, но лучше к специалисту по css |
рони,
так это зависит только от стиля, и никак не решается в скрипте, я правильно понял? |
Цитата:
|
рони,
понял, спасибо вам. Уж простите меня за глупые вопросы :) |
рони,
приветствую вас! прошу прощения за вновь поднятую тему. Ну вот все уже перебрал, не получается у меня убрать дерганье страницы во время прокрутки. Ну не может быть это стиль. Скрипт присваивает стиль (отступ сверху и снизу) body, но неужели internet explorer не понимает padding? |
LADYX,
максимум что ie понимает это position: fixed; но я не знаю решения для данного случая может и это не спасёт от дребезга |
рони,
посмотрите, пожалуйста, здесь (http://recruit.aif.ru/#id=3) используется подобный эффект, но он выполнен с помощью плагина ScrollMagic, и во всех браузерах работает ровно. Вы можете посмотреть, может быть там можно взять решение этой задачи, понять саму структуру что ли? Правда, мне очень необходима такая функция. Буду вам очень благодарен за помощь. |
LADYX,
увы ... пишут что взяли идею тут http://johnpolacek.github.io/superscrollorama/ и похоже они анимируют css функцией - а не по факту старт/стоп скрола -- начался скрол пошла плавная анимация -- 100ms после скрола новый скролл не начался функция останавливается, если крутит дальше -- функция продолжает изменять padding |
рони,
спасибо вам, причем огромное - за уделенное мне время. Буду думать. |
рони,
я прошу прощения, я вот что хотел еще у вас спросить, вы все-таки в этом направлении намного грамотнее меня. Скажите, пожалуйста, а как можно проверить, это скрипт некорректно будет работать только в ie, или в других браузерах также возможно? На сегодня каков процент, как вы считаете, так на вскидку не привязываясь к конкретной статистике по сайтам, посетителей смогут увидеть некорректное отображение скрипта? |
LADYX,
установите самые распространённые браузеры и проверьте , примерно 2 процента увидят глюк. http://alexvaleev.ru/browserstat/ https://www.openstat.com/counter:met...t/browser#1807 |
рони,
я почему у вас спросил, у меня установлены ie, опера, хром, сафари и firefox. Везде показывает скрипт без ошибок, за исключением ie. А мне тут написали, что скрипт некорректно показывает в фоксе. Вот меня и смутило это, как это может быть, у меня без ошибок, а у кого-то с ошибкой. Спасибо вам за полезные для меня ссылки, ну и за терпение! Удачи вам! |
Цитата:
|
рони,
понял, спасибо! |
| Часовой пояс GMT +3, время: 13:16. |