Как эмулировать точки прокрутки CSS в Chrome?

Firefox 39, Safari 9 и IE11 обеспечивают поддержку точек привязки CSS Scroll. Chrome имеет функцию в разработке.

Есть ли polyfill, который будет эмулировать следующие стили CSS:

-webkit-scroll-snap-type: mandatory;
-ms-scroll-snap-type: mandatory;
scroll-snap-type: mandatory;
-webkit-scroll-behavior: smooth;
-ms-scroll-behavior: smooth;
scroll-behavior: smooth;
-webkit-scroll-snap-points-y: repeat(600px);
-ms-scroll-snap-points-y: snapInterval(0px, 600px); /* Old syntax */
scroll-snap-points-y: repeat(600px);
overflow-y: auto;
overflow-x: hidden;

пока функция не будет реализована Chrome?

Ответы

Ответ 2

Здесь другой polyfill: https://github.com/ckrack/scrollsnap-polyfill/

Следует также отметить, что спецификация CSS Snap Points изменилась и больше не включает некоторые из запрошенных свойств, а также добавив новые.

Ответ 3

Если вы захотите рассмотреть возможность повторной реализации ванильной javascript этой функции с последовательным поведением кросс-браузера, вы можете использовать эта библиотека

Почему

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

Как

Библиотека повторно реализует функцию привязки css с использованием функций ослабления javascript в ваниле и работает с использованием значений свойств элемента контейнера scrollTop/scrollLeft и прокрутки Event Listener

Пример

import ScrollSnap from 'scroll-snap'

const snapConfig = {
  scrollSnapDestination: '90% 0%', // scroll-snap-destination css property, as defined here: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-destination
  scrollTimeout: 100, // time in ms after which scrolling is considered finished
  scrollTime: 300 // time in ms for the smooth snap
}

function callback () {
  console.log('called when snap animation ends')
}

const element = document.getElementById('container')
const snapObject = new ScrollSnap(element, snapConfig)

snapObject.bind(callback)

// unbind the element
// snapObject.unbind();