Как изменить скрипт горизонтальной прокрутки?
Добрый день! Как можно изменить скрипт горизонтальной прокрутки? А именно избежать использование в стиле свойства 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)});
|
| Часовой пояс GMT +3, время: 23:17. |