자바스크립트 질문드립니다. 채택완료
그누배우자
2년 전
조회 2,247
안녕하세요.
https://codepen.io/alvarotrigo/pen/gOmgRzL
를 참고해서
마우스 휠을 돌리면
li 영역을 가로로 돌릴 수 있게 하고 싶은데요
</p>
<p><style></p>
<p>#main {</p>
<p> overflow-x: hidden;
display: flex;</p>
<p>}</p>
<p>li {display: flex; float:left; margin-right:20px}</p>
<p></style></p>
<p> </p>
<p><div id="main"></p>
<p><ul></p>
<p><li><img src="<?php echo G5_THEME_IMG_URL?>/1.jpg"></li></p>
<p><li><img src="<?php echo G5_THEME_IMG_URL?>/1.jpg"></li></p>
<p><li><img src="<?php echo G5_THEME_IMG_URL?>/1.jpg"></li></p>
<p><li><img src="<?php echo G5_THEME_IMG_URL?>/1.jpg"></li></p>
<p><li><img src="<?php echo G5_THEME_IMG_URL?>/1.jpg"></li></p>
<p></ul></p>
<p></div></p>
<p> </p>
<p><script></p>
<p>const scrollContainer = document.querySelector("#main");</p>
<p>scrollContainer.addEventListener("wheel", (evt) => {
evt.preventDefault();
scrollContainer.scrollLeft += evt.deltaY;
});
</script></p>
<p>
이렇게 해보는중인데 도통 반응도 없고
li에 float:left; 도 안되고
codepen 예시 페이지처럼 되질않네요 ㅠ
혹시 알고 계신 고수님들 도움 부탁드립니다.ㅜ ㅜ
감사합니다
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
2년 전
될리가 있나요...
각 섹션의 너비가 할당되어 있지 않은데..
</p>
<p>section {
min-width: 50vw;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 4ch;
}</p>
<p>section:nth-child(even) {
background-color: teal;
color: white;
}</p>
<p>
오브젝트 너비부터 정의해보세요.
그리고 코드를 임의로 바꾸지마시고
원본 코드를 우선 그대로 실행하고 이후에 조금씩 수정하는 방향으로 작업해보세요.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인