2 Maj 2019

Dodanie shadow podczas scroll – overflow

Podstawowe założenia:
1. Cień z prawej strony, jeżeli scroll jest na pozycji skrajnej lewej.

2. Cień z lewej strony, jeżeli scroll jest na pozycji skrajnej prawej.

3. Cień po lewej jak i prawej stronie równocześnie, gdy skroll się porusza 😉

Najpierw html

Budujemy div w którym dodajemy nasze elementy.

<div id="scrollbox">
  <ul id="myDIV">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
  </ul>
</div>

Cień w za pomocą styli

Teraz nasz styl. Za jego pomocą wszystkie elementy li są w jednej linii.

#scrollbox {
  overflow-x: auto;
  width: 500px;
  max-height: 220px;
  margin: 50px auto;
}

#scrollbox ul {
  display: flex;
  flex-direction: row;
  white-space: nowrap;
  min-width: 100vw;
  height: 130px;
  margin: 0;
  padding: 0;
  list-style: none
}

#scrollbox ul li {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-width: 130px;
  border: 1px solid red;
  margin: 0 2px
}