마우스 휠 가로스크롤 css 질문드립니다.
본문
안녕하세요
아래와 같이 li 로 여러장의 이미지를 나열중입니다.
<style>
.tabbox {
-ms-overflow-style: none;
scrollbar-width: none;
}
.tabbox::-webkit-scrollbar {
display: none;
}
.tabbox {width:calc(100%); overflow-x:scroll; white-space: nowrap}
ul li {display:inline-block; width:auto; margin-right:50px}
</style>
<div class="tabbox">
<ul>
<li><img src="<?php echo G5_THEME_IMG_URL?>/img1.jpg"></li>
<li><img src="<?php echo G5_THEME_IMG_URL?>/img1.jpg"></li>
<li><img src="<?php echo G5_THEME_IMG_URL?>/img1.jpg"></li>
<li><img src="<?php echo G5_THEME_IMG_URL?>/img1.jpg"></li>
<li><img src="<?php echo G5_THEME_IMG_URL?>/img1.jpg"></li>
<li><img src="<?php echo G5_THEME_IMG_URL?>/img1.jpg"></li>
<li><img src="<?php echo G5_THEME_IMG_URL?>/img1.jpg"></li>
<li><img src="<?php echo G5_THEME_IMG_URL?>/img1.jpg"></li>
<li><img src="<?php echo G5_THEME_IMG_URL?>/img1.jpg"></li>
<li><img src="<?php echo G5_THEME_IMG_URL?>/img1.jpg"></li>
<li><img src="<?php echo G5_THEME_IMG_URL?>/img1.jpg"></li>
<li><img src="<?php echo G5_THEME_IMG_URL?>/img1.jpg"></li>
</ul>
</div>
이렇게 하면 이쁘게 가로로 이미지들이 나열됩니다.
모바일에서는 터치로 좌우 이동 시키면 이미지들이 좌우로 움직입니다.
근데 PC에서는 아무 반응이 없어서요
마우스 휠로 스크롤을 하면 좌우로 이미지가 돌아가게 하고 싶습니다.
구글링을 해보는데 모바일에서 되면 PC에서 안되고
PC에서 되면 모바일에서 안되가지구요..ㅠㅠ
여기 위의 링크 소스를 제 소스에다가 접목시키고 싶은데
도통 해결하지 못하고 있는 상황입니다.
혹시 알고계신 고수님들 계시면 도움 부탁드립니다.
!-->
답변 3
이것 스크립트 봐야 할것 같습니다.
<script>
function scrollHorizontally(e) {
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
var scrollAmount = 100; // 스크롤 속도 조절 가능
// 스크롤 위치 변경
document.querySelector(".tabbox").scrollLeft -= delta * scrollAmount;
e.preventDefault();
}
</script>
이렇게 해보세요.
!-->
<style>
.tabbox {
-ms-overflow-style: none;
scrollbar-width: none;
width: 100%;
overflow-x: scroll;
white-space: nowrap;
}
.tabbox::-webkit-scrollbar {
display: none;
}
ul li {
display: inline-block;
width: auto;
margin-right: 50px;
}
</style>
<div class="tabbox" id="imageContainer">
<ul>
<li><img src="<?php echo G5_THEME_IMG_URL ?>/img1.jpg"></li>
<li><img src="<?php echo G5_THEME_IMG_URL ?>/img1.jpg"></li>
<li><img src="<?php echo G5_THEME_IMG_URL ?>/img1.jpg"></li>
<!-- 추가 이미지들을 여기에 추가 -->
</ul>
</div>
<script>
const imageContainer = document.getElementById("imageContainer");
let scrollPosition = 0;
imageContainer.addEventListener("wheel", (event) => {
// 스크롤 이벤트 발생 시 좌우로 스크롤 이동
scrollPosition += event.deltaY;
imageContainer.scrollLeft = scrollPosition;
});
</script>
답변을 작성하시기 전에 로그인 해주세요.