[HTML, CSS] 스크롤 기능 구현하기

캡스톤 프로젝트 중에 특정 구역 내에서 스크롤을 기능할 일이 생겨서 작성해보는 포스팅!

채팅창을 만드는데 채팅창에 있는 채팅 메세지 내용들만 스크롤이 가능하도록 할 것이다.

 

방법

tailwindcss 버전

import React from 'react';

function MyComponent() {
  return (
    <div className="overflow-y-scroll" style={{ maxHeight: '400px' }}>
      {/* 스크롤이 필요한 컨텐츠 */}
    </div>
  );
}

overflow-y-scroll 을 이용해서 스크롤이 필요한 컨텐츠를 감싸준다.

 

기본 css 버전

import React from 'react';

function MyComponent() {
  return (
    <div style={{ overflowY: 'scroll', maxHeight: '400px' }}>
      {/* 스크롤이 필요한 컨텐츠 */}
    </div>
  );
}

마찬가지로 overflow-y : 'scroll' 속성을 추가해준다.

 

스크롤이 넘치지 않도록 하고싶어

만약에 특정 컴포넌트 외부로 스크롤이 넘치지 않도록 하고싶다면 overflow-hidden 속성을 사용하면 된다.

 

tailwindcss 버전

import React from 'react';

function MyComponent() {
  return (
    <div className="overflow-hidden">
      {/* 스크롤이 발생하는 컴포넌트 */}
      <div className="overflow-scroll max-h-400">
        {/* 스크롤이 가능한 컨텐츠 */}
      </div>
    </div>
  );
}

부모 컴포넌트에 overflow-hidden 을 넣어주고

자식 컴포넌트에 overflow-scroll 을 넣어주었다.

 

기본 css 를 이용했을 때도 어떻게 해야하는지 알아보자

기본 css 버전

import React from 'react';

function MyComponent() {
  return (
    <div style={{ overflow: 'hidden' }}>
      {/* 스크롤이 발생하는 컴포넌트 */}
      <div style={{ overflowY: 'scroll', maxHeight: '400px' }}>
        {/* 스크롤이 가능한 컨텐츠 */}
      </div>
    </div>
  );
}

 

실제 적용

 return (
        <div className="overflow-hidden h-full">
            {showRecordPage ? (
                <RecordPage goBack={handleGoBack}></RecordPage>
            ) : (
                <>
                    {/* 스크롤 가능 섹션 */}
                    <section className="relative h-full overflow-y-scroll pb-24">
                        {/* 채팅 내용 */}
                        <ChatDate></ChatDate>

                        <div className="chat">
                        ...

 

프로젝트에 실제로 적용해본 모습이다.