scrollbar-gutter CSS プロパティでスクロールバーの切り替わりによる画面のガタツキを解消する
scrollbar-gutter CSS プロパティでスクロールバーの切り替わりによる画面のガタツキを解消する 2024.06.01 子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがクラシックスクロールバーの場合、スクロールバーの表示・非表示によりボックスの幅が変わるため、画面がガタつくことがあります。scrollbar-gutter プロパティを使うとスクロールバー用のスペースをあらかじめ確保でき、画面のガタツキを解消できます。 子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがどのように表示されるかは OS やブラウザの設定により異なりますが、大きく分けて以下
React 一番安定する自動スクロール
画面ローディング時にhtmlの一番下までスクロールしたい こんちには、ハトです。業務で自動スクロールが必要になったので、いくつか方法を考えました。 react-scrollでuseEffect(useLayoutEffect)ないでscrollToBottom()する react-windowというリストライブラリを使ってuseEffect時に一番下のアイテムまでscrollToItem()する リストの最後にdivタグをおき、refを取得。useLayoutEffect内で、ref.current.scrollIntoView()をする useRefに関してはこちらの記事もご参考ください。 結論。refでscrollIntoViewをするのがよい ミニマム const List = () => { const scrollBottomRef = useRef<HTMLDivElement
css でスムーススクロールを有効にしたときの位置調整とページ内検索には効かないようにする方法 | もち備忘ログ
javascriptを使わずにスムーススクロールを実装できるscroll-behaviorを使った際に、 ページ内検索などにも影響が出るのを防ぐ方法と、ヘッダーなどが被らないようにする方法をお伝えします。 scroll-behavior: smooth; は、ページ内リンクなどを使うときに一瞬で飛ぶのではなく、滑らかに移動しながら目的の位置まで到達するようになる機能なのですが、 ページ内リンク以外の機能にもスムーススクロールが有効になってしまうという、少し困った性能をしています。 重大な欠陥などがあるわけではないので、そこまで気にする必要もないのかもしれませんが、ページ内リンクにのみ有効にできるならそれに越したことはないのかな？とも思ったので、 コリスさんの記事を眺めていた時に発見した、 （多分）リンクにのみ、スムーススクロールを実装する方法をご紹介します。
【スムーススクロール対応】scrollIntoViewで手軽にスライダー作成 - Qiita
前置き 以下のような表示領域に複数スライドが表示されるスライダーを作りたいとき・・・ 要素のscrollLeftやtranslateXの値を操作することが多いのではないかと思います。 しかし、リキッド対応が必要な場合、このscrollLeftやtranslateXを用いた実装方法だと、 resize イベントのたびにスライドの width を再計算し直して、移動させる位置を調整する必要があるので少し手間がかかります。 そんなときにはscrollIntoViewを使うとサクッと実装できちゃいます。 もっと楽ができる。そう、 scrollIntoView ならね scrollIntoViewとは Element インターフェイスの scrollIntoView() メソッドは、scrollIntoView() が呼び出された要素がユーザーに見えるところまで、要素の親コンテナーをスクロールします
巨大なテーブルコンポーネントを仮想スクロール化してブラウザのメモリ使用量を1/10にした話
この記事は毎週必ず記事がでるテックブログLoglass Tech Blog Sprintの17 週目の記事です。 1 年間連続達成まで残り 36 週となりました！ はじめに こんにちは！株式会社ログラスでエンジニアをしているd4te74です 🍷 ログラスではレポートと呼ばれる経営データ分析のための機能領域を改善するチームに所属しています。 この記事では、最近取り組んでいたレポート機能のフロントエンドのパフォーマンスチューニングとして行った「巨大なテーブルコンポーネントの仮想スクロール化」について書いていこうと思います。 ※ Loglass は事業の予実を管理するサービスです。 レポート機能とは レポート機能とは、Loglass 内に統合された部署や勘定科目などの経営データに対し集計・分析が行える機能で、ユーザー自身がそれらを自由度高く表形式に組み立てて、表示できるというものです。 以下の
CSSだけでスクロールアニメーションが作れる！？ 新技術Scroll-driven Animationsとは - ICS MEDIA
CSSだけでスクロールアニメーションが作れる！？ 新技術Scroll-driven Animationsとは 2023年7月にリリースされたGoogle Chrome 115では、「Scroll-driven Animations」が搭載されました。 Scroll-driven Animationsを使うと、今まではJavaScriptを使わなければ実装できなかったスクロールと連動するようなアニメーションがCSSだけで実現できるようになります。 以下は、CSSだけを使って作成したスクロールアニメーションのデモです。一切JavaScriptは使用していません。 Scroll-driven AnimationsはJavaScriptでも使うこともできますが、本記事では、実装の手軽さを一番にお伝えしたいため、CSSだけを使ったスクロール駆動アニメーションの作り方をご紹介します。 スクロールアニメ
知っておくと便利！ CSSだけで要素がスクロールできるかどうかを検出する方法
CSSだけで要素がスクロールできるかどうかを検出する方法を紹介します。 先日紹介したスクロール駆動アニメーション（Scroll-Driven Animations）はスクロール可能なオーバーフローがある場合にのみアクティブになるため、要素がスクロール可能かも検出することができます。 Solved by CSS Scroll-Driven Animations: Detect if an element can scroll or not by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSで要素がスクロールできるかどうかを検出する アクティブと非アクティブなスクロール駆動アニメーション CSSの変数を追加して、スクロール検出機能を作成 実装でより使いやすくする 実装例 はじめに スクロール駆動ア
Next.jsでブラウザバックした際にスクロール位置を復元したい
目次 背景 next.config.js の experimental.scrollRestoration を true にする experimental.scrollRestoration ってなんだろう？ まとめ 背景 Next.js で実装している時に気づいたのですが、SSG しているページから別ページへ遷移してブラウザバックすると、ページの一番上にスクロールしてしまいます。 感覚としては元のスクロール位置を表示してほしいのですが、なぜか特定のページだけうまくいきません。 これではユーザー体験が良くないので、直していこうと思います。 環境 "react": "^18.2.0" "next": "^12.0.10" next.config.js の experimental.scrollRestoration を true にする 調査してみたところ、同じ現象に言及している方々を見つけ
CSSでの実装が大きく変わる！ Scroll-driven Animations スクロールをトリガーにしたアニメーションを実装する方法
まもなくリリースされるChrome 115で実装されるScroll-driven Animationsにより、スクロールをトリガーにしたアニメーションの実装方法が大きく変わります。 スクロールすると要素がアニメーションで表示されたり、スクロール量で変化するインジケーター、背景が変化するパララックスなど、実装がそれなりに手間がかかりましたが、数行のコードで実装できるようになります。スクロールをトリガーにしたアニメーションを実装するこれからの方法を紹介します。 Animate elements on scroll with Scroll-driven animations by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分が同ライセンスも含みます。 はじめに Webのアニメーション、ちょっとだけおさらい アニ
Animate elements on scroll with Scroll-driven animations | CSS and UI | Chrome for Developers
Scroll-driven animations are a common UX pattern on the web. A scroll-driven animation is linked to the scroll position of a scroll container. This means that as you scroll up or down, the linked animation scrubs forward or backward in direct response. Examples of this are effects such as parallax background images or reading indicators which move as you scroll. A reading indicator atop a document
CSSのsvh・dvhが全ブラウザ対応。iOS・Androidの画面いっぱいに要素を広げる最適解
iOS SafariやAndroid Chromeの画面の高さいっぱいにヒーローイメージを表示するという表現は、よく見かけます。 高さをいっぱいに広げるのに100vhを使うと、不要なスクロールが発生し、意図通りに表示されません。 この問題を解決するために、特殊なCSSを使ったりJSを使ったりと、開発の現場では多くの苦労がありました。 本日（2022/11/30）リリースされたGoogle Chrome 108で対応したsvhを使えば、手軽に画面いっぱいのヒーローイメージを作れます。 Safari・Firefoxでは対応済み、Chromeと中身が同じEdgeは12/1週リリースの108で対応するので、全ブラウザで使える時代が来ます。もちろん、iOS・Androidも対応です。 本記事では、svhの使い方、同様に使えるようになったdvhやsvmaxなどの違い、従来の手法のデメリットをデモを交え
文字スクロールのCSS作成
.scroll { margin : auto; width : 96%; font-size : 140%; line-height: 1.5em; text-align : center; border : 1px solid #666; color : #000000; background : #fff; overflow : hidden; } .scroll span{ display : inline-block; padding-left: 100%; white-space : nowrap; line-height : 1em; animation : scrollAnime 3s linear infinite; } @keyframes scrollAnime{ 0% { transform: translateX(0)} 100% { transform: tra
React でページ内の目的の箇所まで自動スクロールさせる | DevelopersIO
「React で作ったページ内を自動スクロールさせたい」とたまに質問を受けるのでまとめました。 やりたいこと React で作成したページに一覧が表示されているときに、一覧の最後までスクロールさせたい。 または目的の箇所までスクロールさせたい。 環境 React 16.13.1 TypeScript コードと説明 CodePen 上の動くサンプルコード スクロールして表示したい箇所に React の Element をつくる (div など) React.createRef() で ref を作り、作った Element に ref をセット ref.current.scrollIntoView() で Element までスクロール // <List /> の中身は CodePen のサンプルコード参照 const ListPage: React.FC = () => { // 表示する
passive: trueでなぜパフォーマンスがよくなるの？簡単な説明と使い方！ | Tech Blog
スクロールした際のパフォーマンスが悪い場合（スクロールがカクつく場合）にはpassive:trueの使用を検討しましょう。この記事ではイベントリスナーにpassive:trueというヒントを使うことで、スクロールをスムーズにする方法についてご説明します。 passive:trueの役割passive:trueはevent.preventDefault();という関数をイベント内で読んでいないことをブラウザに教えてあげるために使用します。 具体的には次のように使用します。 passive:trueの使用例
Xcode 11でUIScrollViewのAutoLayoutの制約のかけ方が変わった | レコチョクのエンジニアブログ
UIScrollViewはAutoLayoutのみでスクロールできるよう設定できますが、 Xcode 11でその方法が少し変わりました。 作りたいもの 画面幅と同じサイズのViewを2枚横に配置し、スクロールできるようなものを作ります。 Xcode 10.3 違い Xcode 11では Content Layout Guide と Frame Layout Guide が追加されています。 Xcode 10.3(今まで)ではScrollViewの直下にViewを配置、そのViewの子としてスクロールさせたいViewを配置し、制約をかけることでスクロールできるようになっていました。 Xcode 11ではScrollViewの直下にViewが Content Layout Guide と Frame Layout Guide に置き換わったようです。 そのため、Xcode10.3(今まで)でS
HTMLとCSSだけでカルーセル・スライダーを実装するテクニックのまとめ
カルーセルやスライダーをHTMLとCSSだけで実装するテクニックを紹介します。 Flexboxでの横一列配置をはじめ、scroll-snap-typeやscroll-behaviorでスライドのスクロールの挙動を調整でき、自動再生機能もCSSのみで実装できます。 CSS-Only Carousel 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 カルーセルをCSSのみで実装するテクニックのまとめ カルーセルやスライドを実装する時、HTMLとCSSだけでどれだけのものが実装できるか知るとあなたは驚くかもしれません。以前に紹介したHTMLとCSSで実装するスライダーを見てましょう。 実装のポイントは、下記の通りです。 スライダーの各パネルは、Flexboxで横一列に設定します。 パネルを1つだけ表示するにはオーバーフローを使用し、-
Angular で超簡単に画面の自動スクロールを実装する方法 - Qiita
概要 Angular で画面スクロールを実現する方法（いわゆる、画面内アンカーにジャンプする動き） 静的 HTML コンテンツにおいて、画面内スクロールはよく使われる機能だが、Angular はブラウザが要素を探すタイミングが Router によるコンポーネント生成より早いためうまくいかなかった。 スクロールを無理やり実現しようと思ったら、ディレクティブとか頑張ってイジったり、別ライブラリ入れたりと苦労する。 しかし、v6.1 から導入された Router Scroller という機能でスクロールが超簡単に実現できるようになったため、その実装方法の備忘録。 ただし、ヌルヌルっと動くようなアニメーション動作の実装は説明していない。あくまで目的の位置をパッと表示するスクロール処理に関する内容となっている。 前提条件 Angular バージョン 6.1.0 以降のみ対応 RouterModule
パララックスやさまざまなスクロールのエフェクトを簡単に実装できるJavaScriptライブラリ -Locomotive Scroll
Webページやスマホアプリで要素がビューポート内に入った時に、パララックスやさまざまなスクロールのエフェクトを実装できるJavaScriptライブラリを紹介します。 要素をスクロールに追従して表示させたり、視差効果を使ったパララックスやカーテン効果なども簡単に実装できます。 Locomotive Scroll Locomotive Scroll -GitHub Locomotive Scrollの特徴 Locomotive Scrollのデモ Locomotive Scrollの使い方 Locomotive Scrollの特徴 Locomotive ScrollはWebページやスマホアプリでビューポート内の要素検出と視差効果によるスムーズなスクロールを簡単に実装できるJavaScriptライブラリです。virtual-scrollにレイヤーとして構築され、要素がビューポート内に入った時にc
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://twitter.com/jh3yy/status/1731866102508949733
react-scroll を導入し超簡単に画面内のスクロールを実装しよう | fwywd（フュード）powered by キカガク
