Как отключить скролл страницы в области Яндекс Карты?

Question

[itwaslazyday]

Всем привет! Прошу помощи по API Y.Maps 2.1.

Десктоп, требуется чтобы при нахождении над картой работал только зум карты, без скролла страницы. При покидании карты - обычный скролл страницы, как например здесь. Сейчас при зуме колесом мыши в области карты так же срабатывает вертикальный скролл . Что в конструкторе отвечает за это? Вроде раньше был параметр suppressScrollAPI: true, но сейчас в документации этого нет.

Варианты вроде overflow: hidden по событию mouseenter/mouseleave не годятся, так как вызывают мерцание полосы прокрутки. И да, в проекте используется библиотека для управления скроллом, но вроде она не влияет на это поведение.

Comments

[imko]

Да библа скорее всего и влияет, карта по умолчанию ловит твой скролл

[itwaslazyday]

imko, да, вы были правы! Удалил библиотеку, и карта сама заработала как нужно)

Answer 1

[Александр]

Можно сделать вот так.

<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 });

Answer 2

[shsv382]

1. Используй IntersectionObserver для отслеживания положения карт
2. В обработчике onwheel вызови event.preventDefault(), потому что onscroll нельзя отменить так как тебе надо