09.09.2016, 16:58
|
 |
Профессор
|
|
Регистрация: 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.
Причина: Дополнил код
|
|
09.09.2016, 17:25
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
|
LADYX,
макет в сборе попробуйте сделать, иначе непонятно как влияет white-space
|
|
09.09.2016, 20:41
|
|
Профессор
|
|
Регистрация: 19.02.2015
Сообщений: 219
|
|
Сообщение от рони
|
LADYX,
макет в сборе попробуйте сделать, иначе непонятно как влияет white-space
|
Посмотрите, пожалуйста, дополнил |
|
09.09.2016, 21:04
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
|
LADYX,
а какой эффект вы хотите получить в результате?
|
|
09.09.2016, 21:29
|
|
Профессор
|
|
Регистрация: 19.02.2015
Сообщений: 219
|
|
На примере этой страницы - http://recruit.aif.ru/#id=3 Во время вертикальной прокрутки страницы как колесиком мыши, так и скроллингом, когда доходим до блока с узкой горизонтальной фотографией, страница останавливается с центрированием фотографии по вертикали страницы, и начинается горизонтальная прокрутка контента внутри этой фотографии, после чего продолжается вертикальная прокрутка страницы. |
|
09.09.2016, 23:06
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
|
скрипт для эффекта с горизонтальной прокруткой при вертикальном скроле
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>
Последний раз редактировалось рони, 10.09.2016 в 00:45.
|
|
09.09.2016, 23:39
|
|
Профессор
|
|
Регистрация: 19.02.2015
Сообщений: 219
|
|
|
рони
Код, который растягивал страницу, удалил.
Ваш код буду пробовать использовать. И хотел бы вам сказать огромное спасибо за помощь!
|
|
09.09.2016, 23:48
|
|
Профессор
|
|
Регистрация: 19.02.2015
Сообщений: 219
|
|
|
Да, у меня все работает! Ура!
рони
Огромное спасибо за помощь! Желаю вам Удачи!
|
|
10.09.2016, 13:28
|
|
Профессор
|
|
Регистрация: 19.02.2015
Сообщений: 219
|
|
рони,
Я дико извиняюсь! Попробовал использовать прокрутку в блоках. И не могу понять, у меня не получается. Первый блок виден, а второй хоть тресни, ну не прокручивается он, и все тут! Я вот набросал, посмотрите, пожалуйста, что я делаю не так, где моя ошибка. Еще раз прошу прощения https://jsfiddle.net/LADYX/3ep4pha5/
|
|
10.09.2016, 15:03
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
LADYX,
укажите селекторы перемещаемых блоков
$(".horizontal:first", $hor).css({left : delta});
$(".horizontal:last", $hor).css({left : -(width*2 - delta)});
|
|
|
|
