모바일 스크롤바 생성 관련
본문
안녕하세요
모바일 환경에서 가로 스크롤바가 생성되지 않아서 문의 드립니다.
이미지를 감싸는 영역에 다음과 같이 스타일을 주었습니다.
{width:100%;overflow-x:auto}
PC환경에서는 문제 없이 나오는데 왜 모바일에서는 안나올까요...?
크롬, 사파리 모두 안나옵니다..
관련 문제에 대해서 검색도 수차례 하고 적용 해보았는데 안되네요..어려운 문제가 아닌 것 같은데 해결이 안되니 답답하네요 ㅠ
도움 주실 수 있는 분 계실까요?
답변 2
여러가지 원인이 있을 수 있는데 아래의 코드를 한번 참고해서 해결을 해보시겠어요..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Scroll</title>
<style>
.scroll-container {
width: 100%;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.scroll-container img {
display: inline-block;
}
</style>
</head>
<body>
<div class="scroll-container">
<img src="image1.jpg" alt="Image 1" width="300">
<img src="image2.jpg" alt="Image 2" width="300">
<img src="image3.jpg" alt="Image 3" width="300">
....
</div>
</body>
</html>
상위 문제일수도 있습니다.
위 코드한줄로는 왜 그런지 알수 없어요.
