Как исправить div в конце горизонтального скроллера? - PullRequest
Новая
       38

Как исправить div в конце горизонтального скроллера?

0 голосов
/ 18 ноября 2018

У меня есть скроллер, где я добавляю пробел в начале (перед первым элементом) и в конце (после последнего элемента) для имитации полей.

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

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

Но Я бы хотел, чтобы они оставались фиксированными с помощью скроллера, , чтобы онипокройте элементы, которые выходят за пределы пространства внутри скроллера.

enter image description here

РЕДАКТИРОВАТЬ: Более того, я бы предпочел не вводить больше элементов HTML.

Спасибо за помощь. 

.scroller::before {
  left: 0;
  transform: rotate(180deg);
}

.scroller::after {
  right: 0;  
}

.scroller::before,
.scroller::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(to left, red 50%, transparent); /*     I set it red for the demo */
}

.scroller {
  position: relative;
  width: 100%;
  max-width: 1000px; /* for demonstration purpose, limit the size of scroller so that it scrolls with 5 cards inside */
  height: 230px;
  overflow-x: auto;
  overflow-y: hidden;
  background-color: #DEDEDE;

  display: flex;
}

.scroller > :first-child {
  margin-left: 100px !important; /* yeah... */
}

.scroller > :last-child {
  position: relative;
}

.scroller > :last-child::after {
  content: "";
  position: absolute;
  right: -100px;
  width: 1px;
  height: 1px;
  visibility: hidden;
}

.scroller > .card {
  flex-shrink: 0;

  width: 260px;
  height: calc(100% - 2 * 15px);
  margin: 15px;
  background-color: white;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #323235;
}
<div class="scroller">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

1 Ответ

0 голосов
/ 18 ноября 2018

Не знаю, можете ли вы это сделать, но почему бы не добавить элемент (например, div) между вашими картами и скроллером.Этот контейнер будет настоящим скроллером, а его родитель, контейнер, будет устанавливать стиль отображения скроллера (и его эффект затухания).

На самом деле, пока ваши псевдоэлементы :before и :afterобрабатываются как дети других скроллеров (.card предметов), поэтому они также прокручиваются.Создав еще один уровень контейнера, в котором размещены эти псевдоэлементы вне скроллера, вы сможете создать фиксированный стиль над этим скроллером.

/* These 2 first rules are my main concern */
.container::before {
  left: 0;
  /* this attribute in particular */
  background-image: linear-gradient(to right, red, transparent); /*     I set it red for the demo */
}

.container::after {
  right: 0;
  /* this attribute in particular */
  background-image: linear-gradient(to left, red, transparent); /*     I set it red for the demo */
}

.container::before,
.container::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 100%;
  z-index: 99
}

/* Next is the necessary set up */

.scroller {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  overflow-x: auto;
}

.container{
  position: relative;
  width: 100%;
  max-width: 1000px; /* for demonstration purpose, limit the size of scroller so that it scrolls with 5 cards inside */
  height: 230px;
  overflow: hidden;
  background-color: #DEDEDE;
  display: flex;
}

.scroller > :first-child {
  margin-left: 60px !important; /* yeah... */
}

.scroller-end {
  flex-shrink: 0;
  width: 60px;
  height: 100%;
  visibility: hidden;
}

.scroller > .card {
  flex-shrink: 0;

  width: 260px;
  height: calc(100% - 2 * 15px);
  margin: 15px;
  background-color: white;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #323235;
}
<div class="container">
  <div class="scroller">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="scroller-end"></div>
  </div>
</div>
...