inflearn logo
강의

Khóa học

Chia sẻ kiến thức

Bắt đầu phát triển web tương tác đúng cách

Xử lý sự kiện cuộn

스크롤 타겟

349

cki60901425

19 câu hỏi đã được viết

0

스크롤 타겟이 바디에 높이로 되어 있는데요

<div>   <- div 안에 높이로 

     <div>   <- 자식에 div를 컨트롤 할수잇는 방법도 잇을가요?

     </div>

</div>

javascript 인터랙티브-웹 HTML/CSS

Câu trả lời 2

0

cki60901425

 .container {

            overflow-y: scroll;

이면 컨테이너  overflow: hidden; 를 쓸수 없게되면서 스크롤(body와 div)이 2개가 생기는대 

컨테이너 스크롤을 숨길방법은 없을가요?

0

studiomeal

아래 코드를 그대로 카피하시고,
빨간 테두리 안에서 스크롤을 하면서 크롬 개발자도구 콘솔 창을 확인해 보세요~
div 요소의 scrollTop 속성값으로 가져오고 있는 걸 보실 수 있을겁니다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>scroll</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		.container {
			margin-top: 20vh;
			overflow-y: scroll;
			height: 30vh;
			border: 10px solid red;
		}
		.item {
			height: 300vh;
			background: gold;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="item">item</div>
	</div>
	<script>
		const container = document.querySelector('.container');
		const item = document.querySelector('.item');
		container.addEventListener('scroll', function (e) {
			console.log(container.scrollTop);
		});
	</script>
</body>
</html>

왼쪽/오른쪽 동작시 딜레이 문제

0

96

1

변수 범위 관련 질문

0

108

1

perspective 문의

0

104

1

생성자 함수를 클래스 함수로 변경 하고 this 오류 관련

0

150

1

스크롤이 중간 위치에 있을 때 창의 크기를 변환하면 생기는 문제

0

127

1

animation이벤트 질문이요!

0

72

1

resize handler에서 질문이 있습니다.

0

111

1

카드 뒤집힐 때 F가 보인 이유

0

150

1

3d 뒤집기 추가효과

0

220

1

전진! 3D 스크롤 21 강의 질문

1

171

1

eventlistener 질문

0

150

1

zMove 를 1000으로 설정하는 이유에 대하여.

0

169

1

[정보-23강] ES6 class 문법으로 공부하시는 분들!! 화살표 함수로도 시도해보셔요!

1

192

1

동적으로 html 생성 후 이벤트 위임 질문 있습니다.

0

268

1

rotateY()에서 deg에 따른 차이

0

198

1

코드 작성 순서

0

276

1

이미지가 없는데 첨부파일을 다운 받는 방법이 있나요??

1

396

1

'이벤트 위임 보강 영상'에 있는 예제 html이 안 보입니다

0

265

2

섹션5 자바스크립트 이벤트 다루기 질문

1

243

1

[#전진! 3D 스크롤 11] mousePos 공식 질문 있습니다!

0

424

2

css 는 직접 작성을 해야하는걸까용?

0

327

1

translateZ 에 px 이 아닌 vw 로 값을 주신 이유가 있을가요?

0

363

2

house 부분에도 width , height 부분을 꽉 차게 주신 부분이 제가 이해한게 맞는지 궁금합니다.

0

306

2

left:-400vw 가 아닌 translateZ(100vw); 을 입력하신 이유가 궁금합니다.

0

309

2