Как заблокировать прокрутку страницы внутри области Яндекс Карты?

Question

Camila

яндекс.карты , javascript

Как заблокировать прокрутку страницы внутри области Яндекс Карты?

Как можно настроить API Y.Maps 2.1 так, чтобы при взаимодействии с картой работал только зум карты, без прокрутки страницы, и при этом в режиме прокрутки карты поведение скролла становилось обычным? Раньше использовался параметр suppressScrollAPI: true, но сейчас он не указан в документации. Варианты типа overflow: hidden с событиями mouseenter/mouseleave не пригодятся из-за возможного мерцания полосы прокрутки. Какие настройки могут решить данную проблему?

5 апреля 2024 г. 20:39

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для блокировки прокрутки страницы внутри области Яндекс Карты и настройки API Y.Maps 2.1 можно использовать следующий подход:

1. Для блокировки прокрутки страницы внутри области Яндекс карты, можно использовать CSS свойство `overflow: hidden;` для контейнера карты. Например:

```
#map {
  overflow: hidden;
}
```

2. Для настройки API Y.Maps 2.1 так, чтобы при взаимодействии с картой работал только зум карты, можно использовать следующий код:

```
ymaps.ready(function () {
  var map = new ymaps.Map('map', {
    center: [55.76, 37.64],
    zoom: 9,
    controls: ['zoomControl']
  }, {
    suppressMapOpenBlock: true
  });

  map.behaviors.disable('scrollZoom');
  map.behaviors.enable('multiTouch');
});
```

Параметр `suppressMapOpenBlock` поможет заблокировать прокрутку страницы внутри области карты. Метод `behaviors.disable('scrollZoom')` отключит прокрутку карты с помощью колесика мыши, а метод `behaviors.enable('multiTouch')` позволит продолжать прокрутку карты с помощью жестов на сенсорных устройствах.

Надеюсь, это поможет вам решить вашу проблему.

Answer 2

Можно сделать вот так. 
 <div class="scroll-blocker">
  <YOUR_MAP />
</div>
 
 const mouse = { x: -1, y: -1 };
const elements = document.getElementsByClassName('scroll-blocker');

window.addEventListener('mousemove', (event) => {
  mouse.x = event.clientX;
  mouse.y = event.clientY;
});

window.addEventListener('wheel', (event) => {
  const target = document.elementFromPoint(mouse.x, mouse.y);
  for (const element of elements) {
    if (element.contains(target)) {
      event.preventDefault();
      return;
    }
  }
}, { passive: false, capture: true });