ID非公開

2021/3/2 14:57

11回答

スマートフォン用のWebサイトを作っているのですが、ページを下に惰性スクロールしたときに、ある位置でピタッといったん停止して欲しいです。

スマートフォン用のWebサイトを作っているのですが、ページを下に惰性スクロールしたときに、ある位置でピタッといったん停止して欲しいです。 ググりますと、 position:sticky; の情報を見つけました。 別ファイルのcssファイルに記載して、html内にてclass指定して使う方法が見つかりますが、別ファイルのcssは使わずに、止めたいところにあるタグに直接書く書き方はありませんでしょうか？

補足

すみません、コメントいただいた情報から、元々の質問に書きましたstickyのものは、やりたいこととは違うものであることが分かりました。 やりたいことは、縦に長いWebページがあり、コンテンツ領域としては例えば３つのセクションに分けているものでは、次のような動きをさせたいです。 ・例えばページの一番上を表示しているときに思いっきりスクロールをすると、惰性スクロールでセクション３の一番下(つまりWebページの一番下)までスクロールしきってしまいますが、セクション1とセクション２の境目でスクロール自体を止めたいのです。 ・続けてセクション２を見たい場合は、再度スクロール操作が必要、としたいです。 こういったページは見たことがないですが、可能なものでしょうか。 宜しくお願いします。

HTML、CSS | ホームページ作成・13閲覧

ベストアンサー

0

san********

2021/3/2 15:34

こんな感じでしょうか？ サンプル http://webstajuku.html.xdomain.jp/posi/ps03/ --- HTML --- <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } .l-box { position: sticky; top: 0; height: 100vh; line-height: 100vh; text-align: center; font-size: 38px; } .box1 { z-index: 10; background-color: #87ceeb; } .box2 { z-index: 20; background-color: #f0e68c; } .box3 { z-index: 20; background-color: #ff7f50; } </style> </head> <body> <div class="l-box box1">１ページ目</div> <div class="l-box box2">２ページ目</div> <div class="l-box box3">３ページ目</div> </body> </html>

ID非公開

質問者

2021/3/3 6:44

ありがとうございます。 サンプルを見せていただいて、やりたいことと、見つけた情報とが違っていることに気がつくことができました…。 ありがとうございます。 やりたいことは、縦に長いWebページがあり、コンテンツ領域としてはサンプルで見せていただいたように３つのセクションに分けているもので、次のような動きをさせたいです。 ・例えばページの一番上を表示しているときに思いっきりスクロールをすると、惰性スクロールでセクション３の一番下(つまりWebページの一番下)までスクロールしきってしまいますが、セクション1とセクション２の境目でスクロール自体を止めたいのです。 ・続けてセクション２を見たい場合は、再度スクロール操作が必要、としたいです。 伝わりますでしょうか。 また、こういうことは可能なものでしょうか。 宜しくお願いします。

ThanksImg質問者からのお礼コメント

stickyについての理解ができました。 中途半端なところでスクロールを自発的に止めたときに、指定した領域が表示されるまで自動的にスナップしてくれる機能なのですね。 質問文を変えて別の投稿をしようと思います。ありがとうございました。

お礼日時：3/3 9:47