質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Stylus

Stylusとは、node製のCSSメタ言語。同じCSSメタ言語のSassとLessの特長を持ち併せており、シンプルな方法でCSSが記述でき、高い柔軟性があることがメリットです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

1432閲覧

[css] scroll-snapが機能しない

hirotaka612

総合スコア32

Stylus

Stylusとは、node製のCSSメタ言語。同じCSSメタ言語のSassとLessの特長を持ち併せており、シンプルな方法でCSSが記述でき、高い柔軟性があることがメリットです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/01/26 07:18

起きていること

CSSのスクロールスナップを使おうとしているのですが機能しません。

環境

OS Mojave
Chrome 79.0.3945.130
localhost

内容

scroll-typeをmandatoryに、snap-alignをstartにしているので、それぞれのsectionの始まり部分でスナップしてほしいのですが、スナップが機能せず通常のスクロールになってしまいます。

scroll-snap not working で検索して出た結果のページは全て見ましたが、記述に間違っている点はなさそうで、もしお気付きのことがあればご意見いただきたいです🙇‍♂️

コード

HTML

1<template lang="pug"> 2.movie 3 section.contents.contents-01 4 |01 5 section.contents.contents-02 6 |02 7 section.contents.contents-03 8 |03 9 section.contents.contents-04 10 |04 11 section.contents.contents-05 12 |05 13</template>

CSS

1.movie 2 width 100% 3 height 100% 4 scroll-snap-type mandatory 5 scroll-snap-points-y repeat(100vh) 6 scroll-snap-type y mandatory 7 -webkit-overflow-scrolling touch 8 overflow-scrolling touch 9 overflow scroll 10 11 section.contents 12 width 100% 13 height 100vh 14 padding 10% 15 scroll-snap-align start 16 position relative 17 18 .contents-01 19 background-color blue 20 .contents-02 21 background-color white 22 .contents-03 23 background-color blue 24 .contents-04 25 background-color white 26 .contents-05 27 background-color blue

スクリーンショット

止まって欲しくないところで止まっている様子
Image from Gyazo

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問