昨日からのKINFOLKサイトクローンプロジェクト…!
PM香水と一緒にスタートするアイテム🍴🍴

Header Scrollの実装

これをやりたくてホームページでタイトルを担当しました!言っても大丈夫なスクロールイベント!
本当にやりながら首を横に振って丁寧に疑問符を打つ.
マイコード=>

import React, { Component } from "react";
import { Link, withRouter } from "react-router-dom";
import SideMenu from "../SideMenu/SideMenu";
import logo from "./forkfolk.png";
import "./Header.scss";

class Header extends Component {
  constructor() {
    super();
    this.state = {
      logoScale: 8,
      wheelDeltaCount: 0,
      sideMenuVisible: false,
    };
  }
  goToMain = () => {
    this.props.history.push("/");
  };
  sideMenuVisibilityHandler = (e) => {
    const { sideMenuVisible } = this.state;
    this.setState({ sideMenuVisible: !sideMenuVisible });
  };
  componentDidMount() {
    window.addEventListener("wheel", (e) => {
      const { logoScale, wheelDeltaCount } = this.state;
      const { wheelDelta } = e;
      if (window.pageYOffset > 1000) {
        return;
      }
      this.setState({ wheelDeltaCount: wheelDelta / 120 }, () => {
        if (logoScale + wheelDeltaCount < 1) {
          this.setState({ logoScale: 1 });
        } else if (logoScale + wheelDeltaCount > 8) {
          this.setState({ logoScale: 8 });
        } else {
          this.setState({
            logoScale: logoScale + wheelDeltaCount,
          });
        }
      });
    });
  }
  render() {
    const { logoScale, sideMenuVisible } = this.state;
    return (
      <>
        <header className="Header">
          <nav>
            <ul>
              <li>
                <Link to="/">Subscribe</Link>
              </li>
              <li>
                <Link to="/">Issue</Link>
              </li>
              <li>
                <Link to="/">Shop</Link>
              </li>
            </ul>
            <div
              to="/"
              className="imgBox"
              style={{ transform: `scale(${logoScale})` }}
            >
              <img src={logo} alt="logo" onClick={this.goToMain} />
            </div>
            <ul>
              <li>
                <button>
                  <i className="xi-search"></i>
                </button>
              </li>
              <li>
                <button onClick={this.sideMenuVisibilityHandler}>
                  <span></span>
                  <span></span>
                  <span></span>
                </button>
              </li>
            </ul>
          </nav>
        </header>
      </>
    );
  }
}

export default Header;

フラグは最大の状態から始まるので,ホイールが下に下がるときのwheelDelta値が−の特性を用いてコードを記述し,徐々に減少させた.

if (window.pageYOffset > 1000) {
        return;
}

=>計画スクロールを超えた場合、スクロールイベントが発生し、早期に小さくなったり大きくなったりしないように、例外処理が行われます.

どうして思いついたんだろう。

まず、スクロール位置値に基づいてtransformのscale値を変更すべきだと思います.
最初は、スクロール位置の値に基づいて調整しようとしましたが、スクロールの上下位置に基づいて調整する方法も難しくないと考えられるかもしれません.アイデア通りにwheelイベントを使って整理しました.
(今から見ればスクロールする必要があります…スクロール位置値の変化によりscaleに変更する必要があります…明日修正する必要があります…)
その後の問題は、スクロール量が大きすぎると、小さくなるのを阻止するだけで、スクロールするときにサイズが大きくなるということです.
画像が小さくなった点を見つけ、その位置を離れたときにイベントが発生しないように処理します.

一番難しいのは

論理は思ったより簡単だが、変なところが多い.
wheelDelta値を処理する過程で、+と-はまったく異なるねじれが発生した.
しかし、これは簡単に処理できる問題なので、ラッキーです.