Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.05.2015, 22:51
Интересующийся
Отправить личное сообщение для ponyspy Посмотреть профиль Найти все сообщения от ponyspy
 
Регистрация: 27.09.2013
Сообщений: 15

Циклический скролл
Всем привет!

Возникла проблема, необходимо реализовать циклический скролл элементов внутри контейнера, причем средствами события scroll...

вот такая получилась реализация

http://jsfiddle.net/ponyspy/xafyezgb/2/

Но во первых присутствует поддергивание, а во второрых при ее переносе внутрь блока с overflow: scroll она перестает работать

http://jsfiddle.net/ponyspy/avacjjyd/

Спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 04.05.2015, 01:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

ponyspy,

<!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>

Последний раз редактировалось рони, 04.05.2015 в 03:20.
Ответить с цитированием
  #3 (permalink)  
Старый 04.05.2015, 11:25
Интересующийся
Отправить личное сообщение для ponyspy Посмотреть профиль Найти все сообщения от ponyspy
 
Регистрация: 27.09.2013
Сообщений: 15

рони,
Огромное спасибо!

Однако в моей реализации требуется передавать позицию скролла из другой колонки, причем с некоторым коэффициентом, чтобы колонка с бесконечным скроллом немного опережала основную. И в данном случае решение не работает...

Вот пример реализации

http://jsfiddle.net/ponyspy/xL2bnyL4/2/

Последний раз редактировалось ponyspy, 04.05.2015 в 11:29.
Ответить с цитированием
  #4 (permalink)  
Старый 04.05.2015, 16:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

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>
Ответить с цитированием
  #5 (permalink)  
Старый 04.05.2015, 17:37
Интересующийся
Отправить личное сообщение для ponyspy Посмотреть профиль Найти все сообщения от ponyspy
 
Регистрация: 27.09.2013
Сообщений: 15

Спасибо!

В бесконечной колонки очень часто перерасчитывается селектор, Причем эффект сохраняется даже когда скролл уже остановился, в синтетическом примере это только в консоле заметно, а в жизни колонка начинает мелькать.
Ответить с цитированием
  #6 (permalink)  
Старый 04.05.2015, 17:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

ponyspy,
так перерасчёт делают когда скролить перестают при оптимизации
при скроллинге событие повторяется много раз может ещё что

Последний раз редактировалось рони, 04.05.2015 в 17:59.
Ответить с цитированием
  #7 (permalink)  
Старый 04.05.2015, 22:18
Интересующийся
Отправить личное сообщение для ponyspy Посмотреть профиль Найти все сообщения от ponyspy
 
Регистрация: 27.09.2013
Сообщений: 15

рони,
Огромное спасибо!

В итоге использовал ваш изначальный вариант, но скролл с главной колонки передается просто константой, потому что в нее динамически подгружаются элементы во время скролла и высота постоянно прыгает.

Возможно можно еще как-то учитывать скорость скролла в главной колонке чтобы корректировать константу...

Но данная реализация уже подходит

http://jsfiddle.net/ponyspy/xL2bnyL4/5/

Не знаю на сколько она оптимальна...

Еще раз спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
FancyBox переопределяет вертикальный скролл ? ilyas-> Элементы интерфейса 14 08.11.2014 16:55
Js scrollpane, постоянно виден скролл, как убрать? metaller92 jQuery 0 17.07.2013 11:23
Скролл как вконтакте shilinpavel Javascript под браузер 3 14.06.2012 18:44
Определить присутствует ли скролл на iframe sergiyko Общие вопросы Javascript 3 14.03.2011 23:15
Плавный скролл колёсиком Alerto Элементы интерфейса 5 27.08.2009 11:46