Вход | Регистрация | FAQ
Anonymous

Firefox. Медленная прокрутка в #scrollzone

+ Ответить

1 сообщение Страница 1 из 1


Firefox. Медленная прокрутка в #scrollzone

Teamur » Чт окт 15, 2015 7:53 pm

Код: Выделить всё
<!doctype html>
<head>
  <meta charset="utf-8">
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    #container {
      overflow: auto;     
      width: 100%;
      white-space: nowrap;
      font-size: 0;
      scroll-snap-points-x: repeat(100%);
      scroll-snap-type: mandatory;
      scroll-behavior: smooth;
    }
    .slide {
      width: 100%;
      height: 400px;
      display: inline-block;
    }
    #slide-1 {
      background: #ffe477;
    }
    #slide-2 {
      background: #0769ad;
    }
    #slide-3 {
      background: #c6c;
    }
    #scroll-zone {
      overflow-y: scroll;
      margin: 20px auto;
      width: 200px;
      height: 360px;
      background: #fff;
    }
    .items {
      margin: 10px auto;
      width: 120px;
      height: 400px;
    }
    #item-1 {
      background: #c02431;
    }
    #item-2 {
      background: #03a753;
    }
    #item-3 {
      background: #262626;
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="slide-1" class="slide"></div>
    <div id="slide-2" class="slide">
      <div id="scroll-zone">
        <div id="item-1" class="items"></div>
        <div id="item-2" class="items"></div>
        <div id="item-3" class="items"></div>
      </div>
    </div>
    <div id="slide-3" class="slide"></div>
  </div>
</body>
</html>


Чтобы было с чем сравнить, посмотрите на нормальный скроллинг:

Код: Выделить всё
<!doctype html>
<head>
  <meta charset="utf-8">
  <style>
    body {
      margin: 0;
      padding: 0;
      background: #0769ad;
    }
    #scroll-zone {
      overflow-y: scroll;
      margin: 40px auto;
      width: 200px;
      height: 360px;
      background: #fff;
    }
    .items {
      margin: 10px auto;
      width: 120px;
      height: 400px;
    }
    #item-1 {
      background: #c02431;
    }
    #item-2 {
      background: #03a753;
    }
    #item-3 {
      background: #262626;
    }
  </style>
</head>
<body>
  <div id="scroll-zone">
    <div id="item-1" class="items"></div>
    <div id="item-2" class="items"></div>
    <div id="item-3" class="items"></div>
  </div>
</body>
</html>


Вся надежда на Вас, уважаемые форумчане.
Аватара пользователя

Teamur

  • Сообщения: 1
  • Зарегистрирован: Чт окт 15, 2015 7:45 pm


+ Ответить

Страница 1 из 1