#7 가로 스크롤 만들기 - overflow 스크롤 안될 경우

 

 

 

 

 

뭉치에 태그 기능이 도입됐다.

이 태그를 통해 사용자들이 자신이 저장한 태그별로 작품들을 볼 수 있게 할 생각이다.

 

 

이런식으로 UI/UX를 짰고 인제 만들면 됐는데

 

실제로 반영한 결과 태그가 많으니깐 보기가 안좋아서 가로 스크롤을 하기로 했다 🔥

 

해본 결과...ㅋ

안 넘겨진다.

 

그러다가 아래 사이트에서 중요한 정보를 얻었다.

https://www.codeit.kr/community/questions/UXVlc3Rpb246NWUzNDUyMjU4MGU1MTMzNzNkOTYyNjJk

overflow : scroll; 에서 스크롤이 생기지 않는 이유

 

브라우저의 너비를 조절해보다라고 해서 원래 아이폰 프로 14 맥스에서 아이폰 SE로 해보니 잘됐다 ❗️

 

또한 너비를 75%에서 100%로 바꿔주니 아이폰 프로 14 맥스에서도 잘되는걸 확인할 수 있었다.

(이게 SE랑 같은 너비인거임...)

 

이 문제를 해결하기 더 찾아보니 overflow의 동작 원리를 알게 됐다.

overflow을 한 div을 감싼 div의 너비가 500px이면

overflow을 한 div의 너비가 1000px가 되어야지 overflow가 된다고 한다.

 

근데 아무리 div의 width를 줘도 안됐다❗️

그러다가 아래 글을 읽게 되었는데 ios에서만 안되는 고질병 같았다.

https://bbol-world.tistory.com/24

 

.recom-res-tags {
  display: flex;
  overflow-x: scroll; /* 가로 스크롤 활성화 */
  white-space: nowrap; /* 태그들이 줄바꿈 되지 않도록 설정 */
  -webkit-overflow-scrolling: touch;
}

해결방법은 마지막에 넣은 -webkit-overflow-scrolling: touch을 넣으면 됐다.

이걸 넣어주면 웹 브라우저가 GPU를 사용하여 요소를 렌더링하도록 하드웨어 가속을 활성화 할 수 있다.

 

 

 

 

 

 

 

 

 

fin.