CSS3 / бесконечная вертикальная прокрутка карусели с дочерними элементами переменной ширины - PullRequest
Новая
       24

CSS3 / бесконечная вертикальная прокрутка карусели с дочерними элементами переменной ширины

0 голосов
/ 07 марта 2019

Спекуляция с на этот вопрос и отличный ответ У меня есть кое-что, что требует дополнительной работы.У меня есть аналогичная потребность в прокрутке, но с дочерними элементами div, а не с элементами списка, и, что важно, элементы div содержат изображения одинаковой ширины, но переменной высоты.Используя animate / scrolltop, я не могу получить плавную прокрутку.

По сути, я хочу поведение, подобное этому codepen , но с переменной высотой, как в this codepen (который не работает), потому что высота дочернего элементаэлемент не позволяет animate scrollTop точно вычислить: 

setInterval(function(){
 var first_height = $('#list').find('div:first').height(); $('#list').stop().animate({scrollTop:first_height},2650,'linear',function(){
    $(this).scrollTop(0).find('div:last').after($('div:first', this));
  });
}, 2700);

Может кто-нибудь предложить какие-либо советы?

РЕДАКТИРОВАТЬ: почти там с это перо на основе ответа ниже .Я получаю функциональность «привязка к сетке» вместо плавной прокрутки.

1 Ответ

0 голосов
/ 08 марта 2019

Это потому, что вы установили фиксированную высоту в своем CSS, но вы не включили отступы и поля измерение в общую высота элемента div, для которого вы хотите установить анимацию scrollTop.

Чтобы добиться точного измерения каждого элемента в контейнере, нам нужно получить фактические отступы и поля элемента, используя jQuery.css () .

ЗАМЕТЬТЕ

Сокращенные свойства CSS не поддерживаются функцией jQuery.css () . Поэтому нам нужно все определить традиционным образом (LMAO).

Использование parseInt () необходимо, так как результаты функций jQuery возвращаются как символов / строка , что делает его объединением двух результатов вместо добавления их.

Пример: parseInt ($ ('# list'). Find ('div: first'). Css ('padding-top')) + parseInt ($ ('# list'). Find ('div: first) ') .css (' дополнени-низ ')); * +1039 *

приведет к [10 + 10 = 20]

и $ ('# list'). Find ('div: first'). Css ('padding-top') + $ ('# list'). Find ('div: first'). Css (' обивка дна ');

приведет к ['10' + '10' = '1010'] 

var interval = 1000;
setInterval(function() {
var first_height = $('#list').find('div:first').height();
var paddings = parseInt($('#list').find('div:first').css('padding-top')) + parseInt($('#list').find('div:first').css('padding-bottom'));
var margins = parseInt($('#list').find('div:first').css('margin-top')) + parseInt($('#list').find('div:first').css('margin-bottom'));
var animation = interval - paddings - margins;
  $('#list').stop().animate({
    scrollTop: first_height + paddings + margins
  }, animation, 'linear', function() {
    $(this).scrollTop(0).find('div:last').after($('div:first', this));
  });
}, interval);
* {
  box-sizing: border-box;
}

#list {
  overflow: hidden;
  width: 300px;
  height: 250px;
  background: red;
  padding: 10px;
}

#list div {
  display: block;
  padding: 10px 10px;
  margin-bottom: 10px;
  background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list">
  <div style="height: 30px;">Item 1</div>
  <div style="height: 50px;">Item 2</div>
  <div style="height: 30px;">Item 3</div>
  <div style="height: 50px;">Item 4</div>
  <div style="height: 30px;">Item 5</div>
  <div style="height: 50px;">Item 6</div>
  <div style="height: 30px;">Item 7</div>
  <div style="height: 50px;">Item 8</div>
  <div style="height: 30px;">Item 9</div>
  <div style="height: 50px;">Item 10</div>
</div>

Источник: jQuery API | .css () , jQuery API | .animate ()

...