kimizuka https://blog.hatena.ne.jp/kimizuka/ みかづきブログ・カスタム https://blog.kimizuka.org/ Next.js スクロールに連動してアニメーションを動かすサイトや、パララックスを実装する際、 ページのスクロール量（一番上から何%スクロールしているか） スクロールの方向 を管理すると、非常に楽に実装することができます。 今回はNext.js（React.js）のHooks APIを使ってステートでスクロール量、方向を管理するモックを作ってみました。 TypeScript import { useEffect, useState } from 'react'; import styled, { css } from 'styled-components'; // https://blog.kimizuka.… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fblog.kimizuka.org%2Fentry%2F2021%2F01%2F13%2F235551" title="Next.jsでページのスクロールを管理する 📄 - みかづきブログ・カスタム" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/k/kimizuka/20210103/20210103011013.jpg Hatena Blog https://hatena.blog 2021-01-13 23:55:51 rich https://blog.kimizuka.org/entry/2021/01/13/235551 1.0 100%