Циклический скролл
Всем привет!
Возникла проблема, необходимо реализовать циклический скролл элементов внутри контейнера, причем средствами события scroll... вот такая получилась реализация http://jsfiddle.net/ponyspy/xafyezgb/2/ Но во первых присутствует поддергивание, а во второрых при ее переносе внутрь блока с overflow: scroll она перестает работать http://jsfiddle.net/ponyspy/avacjjyd/ Спасибо! |
ponyspy,
:write:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
::-webkit-scrollbar {
display: none;
}
.item {
font-size: 48px;
color: #FFFFFF;
text-align: center;
height: 250px;
background-color: gray;
margin-bottom: 10px;
}
.column {
height: 400px;
overflow: scroll;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var parent = $('.column'), max = parent[0].scrollHeight - parent[0].offsetHeight - 20;
parent.on('scroll', function(event) {
var s = $(this).scrollTop(),
f = $('>:first', parent),l = $('>:last', parent);
if(s > max) {f.appendTo(parent); parent.scrollTop(s - f.height())}
if(s < 5) {l.prependTo(parent);parent.scrollTop(s + l.height()) }
}).scrollTop(5)
}); </script>
</head>
<body>
<div class="column">
<div class="outer">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
</div>
<div class="outer">
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
</div>
</div>
</body>
</html>
|
рони,
Огромное спасибо! Однако в моей реализации требуется передавать позицию скролла из другой колонки, причем с некоторым коэффициентом, чтобы колонка с бесконечным скроллом немного опережала основную. И в данном случае решение не работает... Вот пример реализации http://jsfiddle.net/ponyspy/xL2bnyL4/2/ |
ponyspy,
прокрутка левой колонки сихронизирована с правой , в правой бесконечная прокрутка.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by ponyspy</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.3.js'></script>
<style type='text/css'>
::-webkit-scrollbar {
display: none;
}
.item {
font-size: 48px;
color: #FFFFFF;
text-align: center;
height: 250px;
background-color: gray;
margin-bottom: 10px;
}
.column {
width: 250px;
height: 400px;
overflow: scroll;
float: left;
margin-right: 10px;
}
.main .item {
height: 200px;
}
.main .item:first-child {
margin-top: 10px;
}
.main{
background-color: #00BFFF;
}
.infinity .item {
height: 600px;
}
.infinity{
background-color: #FF69B4;
}
</style>
<script type='text/javascript'>
$(window).load(function(){
var parent = $('.infinity');
var max = parent[0].scrollHeight - parent[0].offsetHeight - 20;
var itemParent = $(">", parent);
var main = $('.main');
var maxMain = main[0].scrollHeight - main[0].offsetHeight-20;
parent.on('scroll', function(event) {
var s = $(this).scrollTop(),
f = $('>:first', parent),l = $('>:last', parent);
if(s > max ) {f.appendTo(parent); parent.scrollTop(s - f.height())} ;
if(s < 5 ) {l.prependTo(parent);parent.scrollTop(s + l.height()) };
}).scrollTop(10).scrollTop(0);
main.on('scroll', function(event) {
var s = Math.floor(max * main.scrollTop()/maxMain) ;
itemParent.appendTo(parent);
parent.scrollTop(s) ;
});
});
</script>
</head>
<body>
<div class="column main">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
<div class="item">17</div>
<div class="item">18</div>
<div class="item">19</div>
<div class="item">20</div>
</div>
<div class="column infinity">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
|
Спасибо!
В бесконечной колонки очень часто перерасчитывается селектор, Причем эффект сохраняется даже когда скролл уже остановился, в синтетическом примере это только в консоле заметно, а в жизни колонка начинает мелькать. |
ponyspy,
так перерасчёт делают когда скролить перестают при оптимизации при скроллинге событие повторяется много раз может ещё что |
рони,
Огромное спасибо! В итоге использовал ваш изначальный вариант, но скролл с главной колонки передается просто константой, потому что в нее динамически подгружаются элементы во время скролла и высота постоянно прыгает. Возможно можно еще как-то учитывать скорость скролла в главной колонке чтобы корректировать константу... Но данная реализация уже подходит http://jsfiddle.net/ponyspy/xL2bnyL4/5/ Не знаю на сколько она оптимальна... Еще раз спасибо! |
| Часовой пояс GMT +3, время: 14:15. |