web-dev-qa-db-ja.com

ChromeでCSSスクロールスナップポイントをエミュレートする方法は？

Firefox 39、Safari 9、およびIE11は、CSSスクロールスナップポイントのサポートを提供します。 Chromeには機能があります 開発中 。

次の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によって実装されるまで？

csspolyfills
15
Martin Vseticka

この機能のVanilla javascriptの再実装を、一貫したクロスブラウザ動作で検討したい場合はこのライブラリ

なぜ

ネイティブのcssソリューションの代わりにこれを使用する主な理由は、最新のすべてのブラウザーで機能し、遷移とスクロール検出のカスタムタイミングを可能にするカスタマイズ可能な構成を備えているためです。

方法

ライブラリは、Vanilla javascriptイージング関数を使用してcssスナップ機能を再実装し、コンテナ要素のscrollTop/scrollLeftプロパティとscrollイベントリスナー

例

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();
5
Luca Falasco

ポリフィルを見つけました： https://github.com/zigotica/scrollSnapPointsPolyfill

広範囲にテストしていません。

2
ngstschr

別のポリフィルは次のとおりです： https://github.com/ckrack/scrollsnap-polyfill/

CSSスナップポイント の仕様が変更され、要求されたプロパティの一部が含まれなくなったこと、および新しいプロパティが追加されたことにも注意してください。

2
filoxo

現時点では、このようなものの動作は非常に貧弱です。Googleでのスクロールは、ovrflow：autoコンテナプロパティでのみ正しく機能しますscroll-snap-alignアイテムのプロパティとスクロールパディングコンテナ内の各アイテムのプロパティ。

[ https://webdesign.tutsplus.com/tutorials/how-to-scroll-snap-using-css--cms-30333] [1]

1
Dmytro Yurchenko