Форум

ponyspy · #1 (**permalink**) 03.05.2015, 22:51

Всем привет!

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

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

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

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

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

Спасибо!

рони · #2 (**permalink**) 04.05.2015, 01:19

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>

ponyspy · #3 (**permalink**) 04.05.2015, 11:25

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

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

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

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

рони · #4 (**permalink**) 04.05.2015, 16:36

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 · #5 (**permalink**) 04.05.2015, 17:37

Спасибо!

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

рони · #6 (**permalink**) 04.05.2015, 17:54

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

ponyspy · #7 (**permalink**) 04.05.2015, 22:18

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

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

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

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

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

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

Еще раз спасибо!

Форум

Справочник

Discord чат

Курсы javascript