[Javascript,React]스크롤이벤트(scrollEvent) - 해당위치(id)로 이동하기/ scroll시 animate /scroll시 하단이동 (scroll to id with javascript, react)

1.해당 id 로 위치 이동시키기 

css 파일에 html scroll-behavior 값을 전체 설정해준후, 

클릭시 이동할 버튼에 a 링크를 하단과 같이 해시 기호를 사용하여 걸어준다. 클릭시 부드럽게 스크롤 되기 원하는 위치에 해당되는 id값을 가진 div를 출력하면 간단하게  부드럽게 움직이는 scroll event 를 줄 수 있다.

1. Make a move to Id(#)

First of all you have to set a 'scroll-behavior' in to a css code.

And If you want to make a move with scroll event, you need <a> link with hash like the below code.

//css
html {
  scroll-behavior: smooth;
}

import React from "react";

export const AtagId = () => {
  const content =
    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
    when an unknown printer took a galley of type and scrambled it to make a type
    specimen book. It has survived not only five centuries, but also the leap into
    electronic typesetting,remaining essentially unchanged. ";

  return (
    <div className="padding10 scrollbehavior">
      <div className="tab flexcenter padding10 cursorpointer">
        <div className="border padding10 hoveryellow ">
          <a href="#Title1">Title1</a>
        </div>
        <div className="border padding10 hoveryellow">
          <a href="#Title2">Title2</a>
        </div>
        <div className="border padding10 hoveryellow">
          <a href="#Title3">Title3</a>
        </div>
      </div>
      <div className="card padding10 heightfull" id="Title1">
        <h1>Title1</h1>
        <p>{content}</p>
      </div>
      <div className="card padding10 heightfull marginTop40" id="Title2">
        <h1>Title2</h1>
        <p>{content}</p>
      </div>
      <div className="card padding10 heightfull marginTop40" id="Title3">
        <h1>Title3</h1>
        <p>{content}</p>
      </div>
    </div>
  );
};

2.이외에도 window 내장함수를 활용하여 스크롤시 특정 이벤트를 지정할 수가 있는데,

필자는 window 전체 길이 기준으로 상태를 변경하는 코드를 많이 사용한다. 

하단과 같이 실시간으로 스크롤시 이벤트를 적용할 수 있다.

2. There is another way to set a scroll event when you do something specific, you can use the window built-in-function.

when you use the code that want to change the event based to window scrollY length. You can refer to the below code.

make a addEventListener to scroll it'll show you the real-time scroll length changed.

import React, { useEffect, useState } from "react";

const Scroll = () => {
  const [isScroll, setIsScroll] = useState(false);
  const onScroll = () => {
    setIsScroll(window.scrollY || window.pageYOffset > 0 ? true : false);
  };
  useEffect(() => {
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, [isScroll]);
  return (
    <div className="scrolling layout padding500">
      {isScroll ? (
        <div className="textred">스크롤 실행</div>
      ) : (
        <div>스크롤 미실행</div>
      )}
    </div>
  );
};

export default Scroll;

3. 그리고 하단 코드는 클릭시 하단으로 이동하는 코드로 대체적으로 많이 사용하지 않을까 싶지만 첨부해본다.

3.And the Bottom of the code is that i used a lot when i click it and it goes to the bottom side of the window.

import React from "react";

const ScrollBt = () => {
  const goScroll = () => {
    const DocumentSize = document.querySelector(".parent");
    window.scrollTo(0, DocumentSize.clientHeight);
  };
  return (
    <div className="padding10 relative parent">
      <span
        className="block bgred100 padding10 rounded cursorpointer absolutetop"
        onClick={goScroll}
      >
        godown
      </span>
      <div className="heightFull"></div>
      <div className="heightFull"></div>
      <span className=" bgblue100 padding10 rounded">here</span>
    </div>
  );
};

export default ScrollBt;