Как мы можем воспроизвести прокрутку карточек Google Playstore, если при прокрутке не разрешается частичная карточка слева от контейнера? - PullRequest
Новая
       40

Как мы можем воспроизвести прокрутку карточек Google Playstore, если при прокрутке не разрешается частичная карточка слева от контейнера?

0 голосов
/ 02 ноября 2019

Я пробовал overflow-x:scroll, но это просто позволяет бесплатную прокрутку, как мы можем ограничить прокрутку / пролистывание, например, чтобы исключить частичные карточки на левой стороне контейнера.

Я пробовал библиотеки галереи изображений, такие как swipeJS, swiperJS, slickJS и т. Д., Но все они либо делают карты свободными при прокрутке, либо ограничивают количество карт, которые могут быть перелистаны за раз. В Playstore таких ограничений нет ... 

$(document).ready(function(){
  var cardWidth = $(".card").width();
  var scrollLimit = cardWidth + 50;
  /*  Procedure I had in mind. 
  
  if( $(".cardWrapper").scrollValue() < scrollLimit ){
    var scrolled = -1 * $(this).scrollValue;
    $(this).scroll(scrolled);
  }
  else{
    var scrolled = 1 * $(this).scrollValue;
    $(this).scroll(scrolled);
  }
  
  */
});
html,
body {
  margin:0; padding:0;
  background:#222;
}

.cardWrapper {
  height:6rem; width:100vw;
  background:#ddd; color:red;
  display:flex; flex-direction: row;
  align-items:center; justify-content:flex-start;
  overflow-x:scroll;
  transition: 300ms ease-in-out all;/* for animating backscroll */
}
.card{
  min-width:6rem; width:30vw; height:5rem;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  background:#222; color:#ddd; margin-left:10px;
  transition: 300ms ease-in-out all;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='cardWrapper'>
  <div class='card'>Card 01</div>
  <div class='card'>Card 02</div>
  <div class='card'>Card 03</div>
  <div class='card'>Card 04</div>
  <div class='card'>Card 05</div>
  <div class='card'>Card 06</div>
  <div class='card'>Card 07</div>
  <div class='card'>Card 08</div>
  <div class='card'>Card 09</div>
  <div class='card'>Card 10</div>
  <div class='card'>Card 11</div>
  <div class='card'>Card 12</div>
  <div class='card'>Card 13</div>
  <div class='card'>Card 14</div>
  <div class='card'>Card 15</div>
  <div class='card'>Card 16</div>
  <div class='card'>Card 17</div>
  <div class='card'>Card 18</div>
  <div class='card'>Card 19</div>
  <div class='card'>Card 20</div>
</div>

Oct 2019 Playstore

Это можно сделать вручную без внешних зависимостей ,[Так же, как использовать VisualStudio для просмотра простого <xml> файла: P]

...