Google 맵을 스크롤 할 때 좌절감을 제거하고 녀석을 최소 코드의 CSS로 할 수있을만큼 시도했습니다.

「그 좌절이 해소, 「Google 맵」으로 기쁜 사양 변경」 의 기사를 읽고, 확실히 자신도 스스로 배치한 지도에 스크롤로 좌절하는 일이구나. .

생각, 구글 맵은 이미 구현되고 오픈 소스 Leaflet.js 에서 시도!

그렇다고 해도, 그대로 JavaScript로 터치 이벤트 제어를 가시가시 구현해 가는 것도 피곤할 것 같고, 그다지 재미없기 때문에, CSS로 할 수 있는 한계를 목표로 해 본다.



소스는 Gist에 넣었습니다.
데모는 모바일에 대해서만 생각하기 때문에 모바일에서 보세요.
덧붙여서 동작 테스트는 iOS만 하고 있습니다.

코드

htps // bl. 오크스. rg/y 누노카와/바 b7546 00 f8725144b604 에 bf1414b

데모

htps // bl. 오크스. 오 rg / y 누노 카와 / 등 w / 바 b7546 00 f8725144b604 bf1414b /

사양

Google지도와 같은 두 손가락으로 만지도 작업을 구현하지 않습니다.

지도 위로 스크롤하면 오버레이가 사라집니다 (지도 조작이 불가능합니다.)

지도의 버튼을 누르면지도를 조작 할 수 있습니다.

지도 이외의 장소를 탭하면 오버레이가 복귀

CSS에서만 했어.

자바스크립트에는 손가락 하나도 닿지 않습니다.
:hover 의사 클래스를 구사하고 있으므로 Android에서도 똑같이 움직일지 모르겠습니다.
iPhone에서만 테스트했습니다.

지도 부분

DOM 의 구조로서는, 맵 뷰와 오버레이와 버튼의 3 개의 <div> (을)를 정리하고 있습니다.

<div id="map">
  <div id="mapView"></div>
  <div class="cover"></div>
  <div class="cover-text"><p>地図を操作する</p></div>
</div>

터치 제어(CSS)

:hover 의 iOS Safari 에서의 거동을 이용했습니다.
실제로 터치 제어를 하고 있는 CSS는 이것뿐입니다.
한계를 목표로 한다든가 말해 두어 3행 2행으로 끝났다!

#map:hover > .cover-text:hover, .cover:hover, .cover:hover + .cover-text {
  display: none;
}
#map:active > .cover, #map:active > .cover-text {
  opacity: 0;
}

.cover 의 요소(=오버레이)를 터치하면, opacity 가 0 가 될 뿐이므로, 지도 조작은 할 수 없지만, 오버레이는 사라져 지도가 보이는 상태가 됩니다. 놓으면 복귀하기 때문에 세로 긴지도도 오버레이를 지우는 버튼을 터치합니다..cover-text 의 요소(=버튼)를 터치하면, display 가 none 가 되고, 그 뒤에 있는 .cover 의 요소도 접해, 이것도 display 가 none 지도를 덮는 요소가 사라지고 조작 가능한 상태가 됩니다.

이용은 계획적으로

어디까지나 CSS만으로 할 수 있는 일을 해 보았다는 내용입니다!
의사 클래스 ( :hover )의 모바일에서의 거동을 이해하지 않으면 야케드합니다.
참고로 할 때는 계획적으로 감사합니다.