Next.jsはどうやってスクロール位置を復元するのか

2022/07/18 107 users Next.js experimental true プラグ

Next.jsにはexperimental(実験的機能)でscrollRestorationというフラグが存在します。 // next.config.js const nextConfig = { // ... experimental: { scrollRestoration: true, }, } module.exports = nextConfig デフォルトでもブラウザ側でスクロール位置を復元してくれることもありますが、Safariでは復元されなか... 続きを読む

【Chrome】textareaの改行時にカーソル位置がガタっとずれる問題の対処法

2021/02/20 36 users textarea viewport イメ カタ スクラップ

Enterキーを押すとtextareaのスクロール位置がずれる問題 ふとZennのスクラップのエディターで、Enterキーを押すと、カーソルのあたっている部分のスクロール位置がガタっとずれる問題が発生することに気づきました。 Enterキーを押したタイミングでカーソルの位置がviewportの先頭もしくは末尾にジャンプするようなイメ... 続きを読む

「zeit/swr」のpagination exampleでScroll Position Restoreを試す - Qiita

2019/12/30 6 users YouTube Qiita ZEIT SWR SPA

こちらはNext.js Advent Calendar 2019の22日目の記事です。 はじめに 例えばYoutubeをスマホで見ていたときに、↓のように一度ページ遷移をしてからブラウザバックしたときにスクロール位置が一番上まで戻ってしまった経験はないでしょうか。 これはSPAが抱える課題の1つで、解決するためには「Scroll Position Restore... 続きを読む

表示領域にピタッと移動！CSSでスクロールスナップを実装しよう | Webクリエイターボックス

2019/01/11 76 users CSS スクロールスナップ 近年 Webクリエイターボックス

2019年1月11日 CSS 画面領域いっぱいに広がるフルスクリーンレイアウト。近年ではよく目にしますね。スクロールした時に画面にピタッと各エリアを表示させたい時に使えるのが「CSSスクロールスナップ」です。JavaScriptなしでスクロール位置を調整してくれますよ！ スクロールスナップの基本 See the Pen scroll-snap ba... 続きを読む

ブラウザ全面を使用したページでスクロール位置を自動的に一定の場所にスナップさせる【jQuery連載14】 | HTML5でサイトをつくろう

2015/07/06 34 users ブラウザ全面 一定 HTML5 場所 スム

最近のウェブサイト構造の1つに、従来は「会社概要」「お知らせ」といった系統のことなるコンテンツを別ページとして用意しておいた構造から、それらをすべて同じページに配置してみせるシングル（単一）ページという構造もよく見られるようになりました。 シングルページは、ページ遷移の面倒さや待ち時間にストレスからくるユーザーのサイト離脱を防ぐ事ができ、また最近のスマートフォンでのサイト閲覧においても、片手でスム... 続きを読む

UITableViewのスクロール位置をView再読み込み時に復帰する方法 - へびにっき

2013/11/26 26 users UIKit UITableView import View

メモリ警告によってViewが破棄された場合、UITableViewのスクロール位置はリセットされてしまう。再度Viewが読み込まれたときに元の位置に戻すには、破棄される直前のスクロール位置を覚えておく必要がある。だいたい次のようなコードになる： ScrollTestViewController.h #import <UIKit/UIKit.h> /* UITableViewControllerでは... 続きを読む

CSS と jQuery で作るスクロールにあわせて回転するロゴ | WWW WATCH

2013/07/22 108 users jQuery transform tumblr CSS ロゴ

Tumblr のスタッフ Blog を見てたら、ロゴ （正確にはロゴの周囲の部分） がスクロールにあわせて回転してて、ちょっと面白かったのでサンプルを使って実際にどういう風に実装されているかを解説してみようと思います。 結構仕組みは簡単で、jQuery の scrollTop() を使ってスクロール位置を取得し、その値を CSS の transform プロパティに都度突っ込んでいくっていう感じ。... 続きを読む

[JS]スクロールした際に見出しや画像やエリアなどが見切れるのを自動補正するスクリプト -Scrollsnap | コリス

2013/06/02 47 users jQuery コリス ストライプ スクロール スクリプト

ユーザーがページをスクロールした時、見出しや画像が見切れてしまう、ストライプの背景で違うカラーが少し見えてしまうなど、ちょっとだけスクロール位置がうまくない時に自動で補正するjQueryのプラグインを紹介します。 Scrollsnap Scrollsnapの特徴 Scrollsnapのデモ Scrollsnapの使い方 Scrollsnapの特徴 Srollsnapはスクロールでのユーザエクスペリ... 続きを読む

１ページ内で複数ページに分割できるjQueryプラグイン「windows」:phpspot開発日誌

2013/05/14 50 users Windows phpspot開発日誌 section 画像

windows １ページ内で複数ページに分割できるjQueryプラグイン「windows」 <section>で区切ったブロックをフルスクリーンのスライドに分割してくれます。 スクロールでページを切替えますが、中途半端なスクロール位置になると自動補正をかけてくれます キーボードショートカットなんかが入るともっと便利だと思いました。 関連エントリ 一枚の画像を高速にスライドさせてアニメーション表示す... 続きを読む

[JS]最近よく見かける1ページ垂直スクロールコンテンツで、スクロール位置を自動補正するスクリプト -windows.js | コリス

2013/03/07 294 users コリス スクリプト

スクロールしすぎも補正 windows.jsの使い方 実装は簡単で、既存のコンテンツにclassを加えるだけで適用できます。 Step 1: HTML HTMLは各コンテンツを配置しているdivやsectionにclassを加えるだけです。 classは変更可です。 <section class="window"></section> <section class="window"></secti... 続きを読む

パララックス制作などで使えるスクロールして特定の位置でアニメーションなどの処理を実行させることが出来るjQueryプラグイン「jquery-peekaboo」「jQuery Waypoints」 | BlackFlag

2013/01/30 130 users 使い道 BlackFlag アクション メモ書き 特定

パララックスサイト制作の際などで活用できる ページ内の特定のスクロール位置でアニメーションなど何か処理を実行させることが出来る jQueryプラグインがいろいろ使い道がありそうだったので 自分用のメモ書きとして紹介してみます。 jquery-peekaboo uniba/jquery-peekaboo・GitHub 使い方はとても簡単で ページをスクロールしてアクションを実行させるポイントになる箇... 続きを読む

ピュアCSSで実装するスクロール要素へのドロップシャドウ効果:phpspot開発日誌

2012/05/09 20 users ピュアCSS phpspot開発日誌 background

Scrolling shadows ピュアCSSで実装するスクロール要素へのドロップシャドウ効果。 スクロール位置がトップにある状態だと下位置にシャドウが表示。 中間位置までスクロールすると上下に表示 フッタに移動すると下のみに表示 ピュアCSSでこれが実装できるみたいです。 :before, :after 内のbackgroundを使ってうまく実装されているみたいですね 関連エントリ ページ内ス... 続きを読む

スクロール位置に応じて注釈表示が可能なｊQueryプラグイン「SmartScroll」:phpspot開発日誌

2011/06/06 86 users スクロールバー 注釈 jQueryプラグイン 位置 長い

SmartScroll スクロール位置に応じて注釈表示が可能なｊQueryプラグイン「SmartScroll」 スクロールバーが長いとどの位置に何があるかっていうのを知りたくなりますが、SmartScrollを使えば次のように、この位置にこんなことが書いてあるよ、を示すことが可能。 使い方次第では長ったらしい文章も分類して分かりやすく表示することができそうですね。 注釈だけじゃなくてデザインも色々... 続きを読む