Альтернатива CSS scroll-snap? - PullRequest
Новая
       44

Альтернатива CSS scroll-snap?

0 голосов
/ 26 июня 2019

Я тестировал CSS scroll-snap на Chrome версии 75.0.3770.100 и Firefox версии 67.0.3. Он прекрасно работает в Chrome, но в Firefox я получаю странные результаты. Согласно MDN , Firefox только начал поддерживать новую спецификацию scroll-snap из версии 68, и я могу подтвердить, что с новой спецификацией она вообще не работает: 

.parent {
  scroll-snap-type: y mandatory;
}

.child {
  scroll-snap-align: start;
}

Однако, используя старую спецификацию (как это предлагается), она, похоже, работает , но она чрезвычайно дерганная и неустойчивая и, кажется, часто прокручивается назад: 

.parent {
  scroll-snap-type: mandatory;
}

.child {
  scroll-snap-coordinate: 0 0;
}

Я не нашел ни одного решения (CSS или JS), которое бы повторяло это поведение в моей версии Firefox (которая совсем не старая!). Лучшее решение, которое у меня было до сих пор, - это моя собственная пользовательская альтернатива JS, которая просто ждет, когда пользователь прекратит прокрутку, а затем плавно прокрутит их до ближайшей точки привязки. Однако это не идеально, так как не выглядит очень естественным - оно замедляется до естественной остановки и , а затем автоматически прокручивает вас до точки привязки.

Вот моя игровая площадка Codepen: https://codepen.io/mrseanbaines/pen/WqErwZ?editors=0100. Если я загружаю одно и то же перо в оба браузера, я получаю поведение, описанное выше.

Кто-нибудь сталкивался с какими-либо призывами к этому?

...