質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

Next.jsでページ遷移するとTypeError: Cannot read properties of null (reading 'offsetTop')が出てしまう

itokoishi
itokoishi

総合スコア61

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0評価

0クリップ

732閲覧

投稿2022/01/14 05:07

いつもお世話になります。

javascriptとnext.jsを勉強しているのですが、
行き詰まってしまっているので教えてください。

トップページにて
「コンテンツ位置までスクロールすると画像がフェードインする」
という処理を入れているのですが、次のページに遷移した際に、

TypeError: Cannot read properties of null (reading 'offsetTop') 14 | const topHeight = window.scrollY 15 | const element = document.getElementById('content') > 16 | const contentOffsetTop = element.offsetTop | ^ 17 | if (topHeight > contentOffsetTop - 500) { 18 | isHideContentImage = false 19 | showLeftImage(isHideContentImage)

というエラーが出てきてしまいます。
毎回発生するというわけではなく、
トップを開いて1スクロールしてすぐに次へのリンクを押したときにエラー発生する時があります。

以下が作成したスクリプトになります

js

export default function Home() { const [isHideContentImage, showContentImage] = useState(true) const imageStyle = isHideContentImage ? `${Style.image}` : `${Style.image} ${Style.show}`; const ShowImage = () => { const topHeight = window.scrollY const element = document.getElementById('content') const contentOffsetTop = element.offsetTop if (topHeight > contentOffsetTop - 500) { isHideContentImage = false showLeftImage(isHideContentImage) } } useEffect(() => { window.addEventListener('scroll', ShowImage, {passive: true}); return () =>{ window.removeEventListener('scroll', ShowImage) } }); return ( <section id="content"> <Link href="/next-page">次のページ</Link> <div className={imageStyle}> <img src="/images/about01.jpg" width="100%" alt=""/> </div> </section> ) }

よろしくお願いします

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。