スムーススクロールの実装例 ｜ TAKLOG

2024/04/15 7 users スムーズスクロール smooth TAKLOG CSS ゴス

html要素にscroll-behavior:smoothを指定するだけのコストの低さ、それでいて従来のアンカーリンクの機能を損ねないことから「スムーススクロールはCSSのみで十分」といった技術記事やポストが多く広まっています。 ただ、そういった技術記事やポストは「CSSのみで対応できる」「ワンライナーで実装できる」と言ったコス... 続きを読む

CSSのこの発想はすごい！scroll-behavior: smooth;によるページ内検索時のスクロールを除外するテクニック | コリス

2021/01/18 18 users smooth jQuery コリス CSS スクロール

ページにhtml {scroll-behavior: smooth;}を加えるだけで、簡単にページ内のスクロールのすべてがスムーズになります。一昔前はJavaScriptやjQueryのプラグインで実装していますが、非常に簡単に実装できるようになりました。 「すべてがスムーズになる」弊害が1つあり、ページ内検索時にも適用されてしまいます。複数の... 続きを読む

HTMLとCSSだけでカルーセル・スライダーを実装するテクニックのまとめ | コリス

2020/01/15 19 users コリス CSS Flexbox カルーセル HTML

カルーセルやスライダーをHTMLとCSSだけで実装するテクニックを紹介します。 Flexboxでの横一列配置をはじめ、scroll-snap-typeやscroll-behaviorでスライドのスクロールの挙動を調整でき、自動再生機能もCSSのみで実装できます。 CSS-Only Carousel 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元... 続きを読む