마우스 휠 가로스크롤 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
이것 스크립트 봐야 할것 같습니다.
답변감사합니다^^
별도의 스크립트는 없는 상태입니다.
그냥 css로만 되어있어유..
모두 다 보여 드리겠습니다. 참고하세요
<style>
.scroll{ -ms-overflow-style: none; scrollbar-width: none; width: calc(100%); overflow-x: scroll; white-space: nowrap; display: flex; align-items: center; }
.tabbox::-webkit-scrollbar { display: none; }
ul { list-style: none; padding: 0; margin: 0; display: flex; }
li { margin-right: 50px; } img { max-width: 100%; }
</style>
<div id="scroll">
<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>
<script>
$.fn.hasScrollBar = function() {
return (this.prop("scrollWidth") == 0 && this.prop("clientWidth") == 0) || (this.prop("scrollWidth") > this.prop("clientWidth"));
};
function wheel(name) {
$(name).on('mousewheel', function (e) {
var hasScroll = $(this).hasScrollBar();
if (!hasScroll) {
// 스크롤이 없을 경우 아무 작업도 수행하지 않음
} else {
e.preventDefault();
var wheelDelta = e.originalEvent.wheelDelta;
if (wheelDelta > 0) {
$(this).scrollLeft(-wheelDelta + $(this).scrollLeft());
} else {
$(this).scrollLeft(-wheelDelta + $(this).scrollLeft());
}
}
});
}
$(function () {
wheel('#scroll');
});
</script>
정말감사합니다. 잘됩니다. ㅠㅠ
웅프님 한가지만 더 여쭤봐도될까요?
마우스 휠을 드래그 해서
이미지가 좌측이나 우측 끝으로 갔을경우
스크롤을 계속 위나 아래로 갈 수 있게 가능할지요..
이미지의 좌측이나 우측끝으로 갔을때 더이상 화면 스크롤이 되지 않아서요..
염치없지만 혹시 알고 계신다면 도움 부탁드립니다..^^
네 스크립트에서 function wheel(name) 수정을 하시면됩니다
정말 감사합니다.!!^^
근데 적용을 해보니 기존과 똑같습니다. ㅠ
마우스 휠스크롤을 해서 이미지 왼쪽끝으로 가도 스크롤을 하면 화면이 위로
마우스 휠스크롤을 해서 이미지 오른쪽끝으로 가도 스크롤을 하면 화면이 아래로
가야 하는데 저게 해봤을땐 기존과 동일합니다. ㅠ
<style>
.scroll{ -ms-overflow-style: none; scrollbar-width: none; width: calc(100%); overflow-x: scroll; white-space: nowrap; display: flex; align-items: center; }
.tabbox::-webkit-scrollbar { display: none; }
ul { list-style: none; padding: 0; margin: 0; display: flex; }
li { margin-right: 50px; } img { max-width: 100%; }
</style>
<div id="scroll">
<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>
<script>
$.fn.hasScrollBar = function() {
return (this.prop("scrollWidth") == 0 && this.prop("clientWidth") == 0) || (this.prop("scrollWidth") > this.prop("clientWidth"));
};
function wheel(name) {
$(name).on('mousewheel', function (e) {
var hasScroll = $(this).hasScrollBar();
var scrollLeft = $(this).scrollLeft();
var scrollWidth = this.scrollWidth;
var clientWidth = this.clientWidth;
if (hasScroll) {
e.preventDefault();
var wheelDelta = e.originalEvent.wheelDelta;
if (wheelDelta > 0 && scrollLeft > 0) {
$(this).scrollLeft(scrollLeft - Math.min(scrollLeft, wheelDelta));
} else if (wheelDelta < 0 && scrollLeft < scrollWidth - clientWidth) {
$(this).scrollLeft(scrollLeft + Math.min(scrollWidth - clientWidth - scrollLeft, -wheelDelta));
}
}
});
}
$(function () {
wheel('.scroll');
});
</script>
풀소스인데 혹시 제가 뭘 잘못만진게 있는지 한번만 봐주시면
정말정말정말 감사드리겠습니다!!!!
<script>
$.fn.hasScrollBar = function() {
return (this.prop("scrollWidth") == 0 && this.prop("clientWidth") == 0) || (this.prop("scrollWidth") > this.prop("clientWidth"));
};
function wheel(name) {
$(name).on('mousewheel', function (e) {
var hasScroll = $(this).hasScrollBar();
var scrollLeft = $(this).scrollLeft();
var scrollWidth = this.scrollWidth;
var clientWidth = this.clientWidth;
if (hasScroll) {
e.preventDefault();
var wheelDelta = e.originalEvent.wheelDelta;
var maxScrollLeft = scrollWidth - clientWidth;
if (wheelDelta > 0) {
if (scrollLeft > 0) {
$(this).scrollLeft(Math.max(0, scrollLeft - Math.min(scrollLeft, wheelDelta)));
} else {
$(this).css('overflow-y', 'scroll');
}
} else if (wheelDelta < 0) {
if (scrollLeft < maxScrollLeft) {
$(this).scrollLeft(Math.min(maxScrollLeft, scrollLeft - wheelDelta));
} else {
$(this).css('overflow-y', 'scroll');
}
}
}
});
}
$(function () {
wheel('.scroll');
});
</script>
이렇게 해보세요 ^^
<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>
