Q&A
CSSの部分を明記ください
実現したいこと
HTML
1<ul> 2 <li> 3 <h2>タイトル</h2> 4 </li> 5 <li> 6 <h2>タイトル</h2> 7 </li> 8 <li> 9 <h2>タイトル</h2> 10 </li> 11</ul>
上記のような構成のHTMLがあり、各li要素にheight: 100vh;とposition: sticky;とtop: 0;を指定すると、各li要素が画面上端に到達すると次のli要素が昇ってくるのですが、その昇ってくるタイミングを少し遅延させたいです。欲を言えばその遅延の度合いも調整出来たらうれしいです。
発生している問題・分からないこと
遅延させる方法が分かりません。
該当のソースコード
特になし
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
ググったり、自分で実装を試みましたが実現できませんでした。
補足
特になし
厳密にはli要素の中に画像が入っているだけなので、cssはli要素自体にwidth: 100%;とheight: 100vh;で画像にwidth,height: 100%、object-fit: cover;といった形です。
どこまでを対象にしたいか例示できます？
たとえばwindowsであればwheelだけ止めれば良いのか？touchmoveや矢印キーまで制御したいのか？スクロールバーを掴んで移動するのまでとめたいのか・・・など
申し訳ないです。僕の知識がないせいでyambejp様のおっしゃっていることが理解できないです。現在の指定だけだと、スクロールして各liが画面上端に到達した瞬間次のliが昇ってくるのですが(stickyの仕様は理解しています)、その次のli要素が昇ってくるタイミングを遅延というか、指定スクロール量を超えたら昇ってくる形にしたいです。
ブラウザは矢印キーやpageup/down、home、endなどでもスクロールするということです。右側にでる縦スクロールバーをつかってもスクロールできますよね？それをどこまで制御したいかということです
li要素にmargin-bottomをつけるのではダメそうでしたか？
回答1件
0
端的にスクロールを一瞬とめるのであればwheelイベントを一瞬だけ停止させればよいでしょう。
ただしスクロールとはwheelだけではないので、あらやるスクロールをとめたいということであればイベントごと個別に対応が必要です。
投稿2025/07/07 03:20
総合スコア117923
あなたの回答
tips
プレビュー
