모바일에서 오버레이 내부의 스크롤

카카오맵 API (지도/로컬)
1

모바일에서 오버레이 내부 스크롤을 하려고하면 지도가 움직입니다
pc에서도 마우스휠을 통한 스크롤은 안되고 스크롤바를 직접 움직여 작동하는데
모바일 웹에서 overlay의 스크롤 문의 같은 고민을 가진 질문이 있길래 링크에 있는 답변을 보고 고치려해도 그대로입니다…
for (var j = 0; j < overlays.length; j++) {
overlays[j].addEventListener(‘wheel’, function() {
kakao.maps.event.preventMap();
});
overlays[j].addEventListener(‘touchstart’, function() {
kakao.maps.event.preventMap();
});
}
이렇게 코드를 추가했는데 왜 안되는 걸까요

2

CustomOverlay 객체에 이벤트를 등록하고 계신 것 같습니다.
CustomOverlay의 content에 이벤트 등록을 해야 합니다.

let wrap = document.createElement('div');
wrap.className = 'wrap'; 
wrap.addEventListener('wheel', function() {
    kakao.maps.event.preventMap();
});

overlay.setContent(wrap);
3 
  for (var j = 0; j < overlays.length; j++) {
    let wrap = document.createElement(overlays[j]);
    wrap.className = 'wrap'; 
    wrap.addEventListener('wheel', function() {
        kakao.maps.event.preventMap();
    });

    overlay.setContent(wrap);
  }

이렇게 코드를 수정하는게 맞나요? 아직 안되는데
웹개발 연습중이라 어렵네요… 혹시나 답변에 도움 되실까싶어서 overlay내용 코드 더 올려봅니다…:

var overlay = new kakao.maps.CustomOverlay({
      content:
        '<div class="wrap">' +
        ' <div class="info">' +
        '   <div class="title">' +
        	  data[i][2] +
        '     <div class="close" onclick="closeOverlay(' + i + ')" title="close"></div>' +
        '   </div>' +
        '	  <div class="explain"><ul>'+
        '	  <li>개학식:'+data[i][3]+'</li><li>중간고사:'+data[i][4]+'</li><li>연습중1</li><li>연습중2</li><li>연습중3</li><li>연습중4</li>'+
    	  '	  </ul></div>'+
        ' </div>' +
        '</div>',
      map: map,
      position: new kakao.maps.LatLng(data[i][0], data[i][1])
    });

    markers.push(marker);
    overlays.push(overlay);
  }
4

제가 드린 코드는 참고용으로 구현하신 content에 맞게 적용해주셔야 합니다.

먼저 여러개 커스텀 오버레이에 이벤트를 등록할 경우
아래 답변 참고하셔서 문자열이 아닌 HTMLElement로 구성해주시고
wheel 이벤트는 content의 상위 요소(class가 wrap인 요소)에 등록해주세요.
https://devtalk.kakao.com/t/topic/103147/2

1개의 좋아요
5

알려주신대로 아래 코드처럼 HTMLElement로 구성하였는데 여기서 wheel이벤트를 어디에다가 등록해야되는건지 다시 설명해주실수있을까요…?

for (var i = 0; i < data.length; i++) {
  var marker = new kakao.maps.Marker({
    map: map,
    position: new kakao.maps.LatLng(data[i][0], data[i][1])
  });

  var contentDiv = document.createElement('div');
  contentDiv.className = 'wrap';

  var infoDiv = document.createElement('div');
  infoDiv.className = 'info';

  var titleDiv = document.createElement('div');
  titleDiv.className = 'title';
  titleDiv.textContent = data[i][2];

  var closeDiv = document.createElement('div');
  closeDiv.className = 'close';
  closeDiv.title = 'close';
  closeDiv.onclick = (function (index) {
    return function () {
      closeOverlay(index);
    };
  })(i);

  titleDiv.appendChild(closeDiv);
  infoDiv.appendChild(titleDiv);

  var explainDiv = document.createElement('div');
  explainDiv.className = 'explain';

  var ul = document.createElement('ul');

  var liOpening = document.createElement('li');
  liOpening.textContent = '개학식: ' + data[i][3];
  ul.appendChild(liOpening);

  var liMidterm = document.createElement('li');
  liMidterm.textContent = '중간고사: ' + data[i][4];
  ul.appendChild(liMidterm);

  var liTest1 = document.createElement('li');
  liTest1.textContent = 'Test 1';
  ul.appendChild(liTest1);
    
   var liTest2 = document.createElement('li');
  liTest2.textContent = 'Test 2';
  ul.appendChild(liTest2);
    
  var liTest3 = document.createElement('li');
  liTest3.textContent = 'Test 3';
  ul.appendChild(liTest3);

  explainDiv.appendChild(ul);
  infoDiv.appendChild(explainDiv);
  contentDiv.appendChild(infoDiv);

  var overlay = new kakao.maps.CustomOverlay({
    content: contentDiv,
    map: map,
    position: new kakao.maps.LatLng(data[i][0], data[i][1])
  });

  markers.push(marker);
  overlays.push(overlay);
}
6

아래와 같이 explain 스타일을 추가 및 wheel 이벤트를 등록하면 동작을 확인할 수 있습니다.
wheel 이벤트를 적용할 요소에 이벤트를 등록해주세요.

<style>
    .explain {height: 65px; overflow-y: scroll;}
</style>


contentDiv.addEventListener('wheel', function() {
  kakao.maps.event.preventMap();
});