[B! scroll] ar0のブックマーク

CSSのみでスムーススクロール実装とアンカーリンクのスクロール位置を調整する方法｜BLACKFLAG

ページ内でスムーススクロールをする際は今まではJavaScriptを使って実装をすることが多かったですが、最新のモダンブラウザではCSSだけで簡単に実装することができます。それに加えて、アンカーリンクでスクロールする際に固定ヘッダーがあったりするとスクロールを止める位置の調整がめんどうだったりしますが、それも最新のモダンブラウザでは簡単にCSSで操作することができます。今回はCSSだけでスムーススクロールを実装する方法と、アンカーリンクのスクロール位置を調整する方法を備忘録メモとして紹介してみます。 CSSのみでスムーススクロールを実装するには「scroll-behavior」プロパティの「smooth」を使用します。ページ全体にスムーススクロールを実装する場合はhtmlタグに対して「scroll-behavior」プロパティを指定します。 html { scroll-behavio

ar0 2022/12/15

リンク

CSSで1行で簡単にスムーススクロールを実装できる「scroll-behavior」プロパティ

ページ内リンクをクリックしたときに、ページがキレイにスクロールしながら移動するいわゆる「スムーススクロール（スムーズスクロールと言う人もいますが、英語だとSmooth Scrollなので、この記事ではスムーススクロールに統一します）」。ひと昔前だとjQueryを活用したり、window.scrollを使ったりが必要でしたが、CSSでも実現ができます。 scroll-behavior: smooth;を指定してあげると、ページ内リンクをクリックしたときにスムーススクロールになります。 1行追加するだけなので非常にラクですね。 html { scroll-behavior: smooth; }実際のサンプルは下記になります。 See the Pen scroll-behavior: smooth; by Masakazu Saito (@31mskz10) on CodePen. ちゃんとペ

ar0 2022/07/22

リンク

ScrollHint

ScrollHint A JavaScript library to suggest that the elements are scrollable horizontally, with the pointer icon. Download GitHub Quick start Using CDN You can easily start by using CDN. Add the following description in the <head> tag of the web page you want to use ScrollHint. <link rel="stylesheet" href="https://unpkg.com/scroll-hint@latest/css/scroll-hint.css"> <script src="https://unpkg.com/scr

ar0 2021/09/09

“new ScrollHint('.js-scrollable');”

scroll

リンク

CSSでシンプルに水平スクロール（横スクロール）のリストを作る - Qiita

横スクロールのUI 個々最近、カード型のコンテンツが横に並んでいてスクロールできるUIをよく見かけるようになりました。例えばAirbnbのWebサイトではこんな感じ。 CSSで水平スクロールを実装するポイントは次のとおり。 - ulおよびliを使ってリスト構造を表現する - ulに対してoverflow-x: auto;、white-space: nowrap;を指定 - liに対して、display: inline-block;を指定 - liに対してwidth: 90%;のような横幅を指定すると、コンテンツが見切れて見えるhorizontalので、横スクロールできることがわかりやすいソースコードはこんな感じ。 <!DOCTYPE html> <html> <head> <title>Horizontal Scroll</title> <style> .horizontal-lis

ar0 2021/08/30

リンク

「vue-scrollto」を使ってNotificationを実装する|カバの樹

vue-scrolltoとは「vue-scrollto」は、クリックイベントによって要素までイージングスクロールを実装するライブラリです。 window.requestAnimationFrameを使用してアニメーションを実行するため、最高のパフォーマンスが得られます。イージングはbezier-easingを使って行われます環境インストール以下のnpm、yarn、CDNを使ってインストールします。 npm npm install --save vue-scrollto yarn yarn add vue-scrollto CDN <script src="https://cdn.jsdelivr.net/npm/vue-scrollto"></script> gitリポジトリは以下から取得できます。 https://github.com/rigor789/vue-scrollTo

ar0 2021/08/17

“vue-scrollto”

リンク

【Vueスクロールアニメーション】ボワッと表示させたり色々な実装をしてみる。

ar0 2021/08/06

AOS
scroll

リンク

AOS - Animate on scroll library

ar0 2021/08/06

scroll

リンク

掲示板/スタイルシート質問板［過去ログ］/一覧/CSSでページ内スクロールを入れるとMACIEで・・・ - TAG index Webサイト

ar0 2008/07/06

scroll
tips

リンク

[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 | コリス

以前、紹介した「Page Scroller」のバージョンアップ版「Page Scroller ver.3」の紹介です。追記： 2013年10月26日 ver.3.0.9をリリース jQueryの旧版によるXSSに対応しました。 2011年5月4日デモおよびダウンロードファイルをjQuery1.6に変更しました。 2011年1月31日 ver.3.0.8をリリース機能を追加しました。 2010年11月19日 ver.3.0.7をリリースライセンスを変更しました。 2010年11月17日デモおよびダウンロードファイルをjQuery1.4.4に変更しました。 2010年9月19日デモおよびダウンロードファイルをjQuery1.4.2に変更しました。 2009年7月6日対応ブラウザ（IE8, Fx2.5, Chrome2）を更新しました。 2009年2月23日 ver.3.0.6をリ