inflearn logo
강의

講義

知識共有

3Dリーフレットの作成 - インタラクティブWebプロジェクト

3Dリーフレット作り #10

줌인 상태일 때

273

leh87671680

投稿した質問数 80

0

줌인 상태일 때, current-menu 클래스가 추가된

menu-item 외에 다른 menu-item을 누르면 leaflet 의 위치가 바뀌면서 틀이 틀어지는 이슈가 생겼습니다.

current-menu 클래스가 메뉴 중 1개라도 추가가 되어 있다면 zoomin 함수가 실행되지 않게 하고 싶은데.. 

제가 코드를 아는 지식선에서 해봤지만 오류만 나네요ㅠㅠ

css로 

.zoom-in { pointer-event: none }

.current-menu .back-btn { pointer-event: auto }

로 설정을 했더니

current-menu 가 추가가되면 다른 

menu-item은 클릭하지 못하게 설정은 되었습니다.

css로 적용이 아닌

스크립트로 적용하고싶은데..

이럴 땐 어떻게 코드를 개선해줘야할지..답변 부탁드립니다!!

javascript HTML/CSS 인터랙티브-웹

回答 1

1

studiomeal

아 답변이 많이 늦었네요 죄송! ^^;
완성소스코드가 나중에 업데이트가 된 적이 있는데요,
완성소스 main.js의 99번 라인을 보시면("추가 코드"라고 검색해보시면 됩니다) body에 zoom-in 클래스가 있으면 동작하지 않도록 처리하고 있답니다.
이런 식으로 CSS와 JS를 결합해서 생각하시면 좀 더 간단한 방법으로 처리할 수 있는 것들이 많이 있습니다^^

click 이벤트핸들러의 아래 부분입니다.

if (menuItemElem) {
	// 추가 코드: 줌인된 상태에서는 동작하지 않도록 zoom-in 클래스를 체크
	if (!document.body.classList.contains('zoom-in')) {
		zoomIn(menuItemElem);
	}
}

중요하진 않지만 설명하신부분에서 안된부분..

0

11

0

강의 듣는 순서가 어떻게 되나요?

0

28

1

안녕하세요, 강좌 5의 피그마 파일은 어디서 볼 수 있나요?

0

45

2

stopPropagation()에 대해서 질문 있습니다.

0

31

2

12.13) 하단 여백 스타일링 관련 질문 드립니다.

0

41

2

transform-style: preserve-3d; 를 추가하면

0

52

1

Babel의 사용법 아래 링크의 영상이 비공개 동영상이라고 뜹니다.

0

124

1

페이지 클래스리스트 제거 해줬을때

0

94

0

페이지를 클릭할 때 Uncaught TypeError: Cannot read properties of undefined (reading 'contains') 에러가 뜹니다.

0

1052

1

질문 있습니다ㅠ.ㅠ..

0

416

1

클릭 시 자꾸 page element만 인식됩니다.

0

243

1

가운데 페이지만 줌인이 됩니다

0

271

1

body에 perspective를 주면 갑자기 html과 body 높이가 0이 됩니다

0

407

1

이벤트 위임 방식 질문

0

232

1

이사람 누군지 아세요..?

3

421

1

선생님 질문있습니다 이 강의를 리액트환경에서 적용하고싶은데요,

0

294

1

질문있습니다.

0

218

1

선생님 질문잇습니다. ㅠ

0

273

1

줌인이 왜 안되는지를 모르겠어요..

1

274

1

질문이 있어요

1

250

1

질문 있습니다.

0

378

2

선생님 질문 있습니다!

1

272

2

쌤 화면 크기 줄엿을때 글자들 삐져나오는거는 어떻게 해결하죠?

0

399

2

소스코드 압축이 풀리지 않습니다.

0

350

4