SIR
목록으로

자바스크립트 질문드립니다. 채택완료

그그누배우자
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전 조회 2,518
답변 2
목록

안녕하세요.

 

https://codepen.io/alvarotrigo/pen/gOmgRzL

를 참고해서

마우스 휠을 돌리면

li 영역을 가로로 돌릴 수 있게 하고 싶은데요

 

Copy 
<style>

#main {

  overflow-x: hidden;
  display: flex;

}

li {display: flex; float:left; margin-right:20px}

</style>

 

<div id="main">

<ul>

<li><img src="<?php echo G5_THEME_IMG_URL?>/1.jpg"></li>

<li><img src="<?php echo G5_THEME_IMG_URL?>/1.jpg"></li>

<li><img src="<?php echo G5_THEME_IMG_URL?>/1.jpg"></li>

<li><img src="<?php echo G5_THEME_IMG_URL?>/1.jpg"></li>

<li><img src="<?php echo G5_THEME_IMG_URL?>/1.jpg"></li>

</ul>

</div>

 

<script>

const scrollContainer = document.querySelector("#main");

scrollContainer.addEventListener("wheel", (evt) => {
    evt.preventDefault();
    scrollContainer.scrollLeft += evt.deltaY;
});
</script>

 

이렇게 해보는중인데 도통 반응도 없고

li에  float:left; 도 안되고

codepen 예시 페이지처럼 되질않네요 ㅠ

 

 

혹시 알고 계신 고수님들 도움 부탁드립니다.ㅜ ㅜ

감사합니다

#그누보드5 #php

답변 2개

채택된 답변
+20 포인트

될리가 있나요...

각 섹션의 너비가 할당되어 있지 않은데..

 

Copy 
section {
  min-width: 50vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4ch;
}

section:nth-child(even) {
  background-color: teal;
  color: white;
}

 

오브젝트 너비부터 정의해보세요.

 

그리고 코드를 임의로 바꾸지마시고

원본 코드를 우선 그대로 실행하고 이후에 조금씩 수정하는 방향으로 작업해보세요.

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

코드펜 코드 그대로 사용하시고, h1태그 자리에 이미지 태그 넣으시면 될 듯.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고