[Front] 스크롤은 가능하되 스크롤 안 보이게 하기 (쉬움)

바로 들어가보자.

 

모달이 있다고 가정해보자.

# 상위 DIV ID {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

# 하위 DIV ID {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    box-sizing: content-box; /* So the width will be 100% + 17px */
}

부트스트랩 모달 기준으로 설명을 하자면?

    <!-- Modal -->
    <div
      class="modal fade"
      id="exampleModal"
      tabindex="-1"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
        <!-- 아래를 상위 div로 정한다 -->
      <div
        class="modal-dialog"
        style="width: 100%; height: 100%; overflow: hidden"
      >
      
      <!-- 아래를 하위 div로 정한다 -->
        <div
          class="modal-content"
          style="
            width: 100%;
            height: 100%;
            overflow-y: scroll;
            padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
            box-sizing: content-box; /* So the width will be 100% + 17px */
          "
        >
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">

 

출처: https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll

Hide scroll bar, but while still being able to scroll

또 다른 방법! 이게 더 쉬울지도?

<!--여기는 상위 하위 없이 그냥 스크롤 없애고 싶은 div 클래스를 하나 가져온다-->

.div 클래스 {
  overflow-y: scroll; 
}

/* 크롬, 사파리, 오페라 기준 */
.div 클래스::-webkit-scrollbar {
    display: none;
}

/* 파이어폭스, 익스플로러, 엣지 */
.div 클래스 {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}