Как запретить leaflet.js прокручивать страницу при масштабировании

Если карта Leaflet выходит за границы области просмотра окна браузера, то при нажатии на кнопки зума, страница прокручивается к началу карты. В итоге страница постоянно прыгает – такое поведение не удобно и раздражает.

Обсуждение темы на https://github.com/Leaflet/Leaflet/issues/4125.

Данный баг проявляется в Chrome и других браузерах на основе Chromium:

При масштабировании Leaflet страница прокручивается к началу

Решение

Проблема заключается в необходимости держать контейнер карты в фокусе, чтобы события клавиатуры направлялись через него. Клик по кнопке масштабирования переводил бы фокус на саму кнопку и поведение карты было бы неправильным.

Чтобы исправить данную проблему, нужно добавить следующий код:

L.Control.prototype._refocusOnMap = function _refocusOnMap(ev) {
	if (this._map && ev && ev.screenX > 0 && ev.screenY > 0) {
		this._map.getContainer().focus({ preventScroll: true });
	}
};
JS

Полный пример инициализации карты:

<div id="map"></div>

<style type="text/css">
#map {
	width: 100%;
	height: 1000px;
}
</style>

<link rel="stylesheet" href="/leaflet/leaflet.css">
<script src="/leaflet/leaflet.js"></script>

<script>
L.Control.prototype._refocusOnMap = function _refocusOnMap(ev) {
	if (this._map && ev && ev.screenX > 0 && ev.screenY > 0) {
		this._map.getContainer().focus({ preventScroll: true });
	}
};

var map = L.map('map', {
	center: [38.89, -77.03],
	zoom: 5,
	minZoom: 1,
	maxZoom: 18
});
 
var tiles = new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var marker = L.marker([38.89, -77.03]).addTo(map);
</script>
HTML

Результат:

27.01.2022
536

Комментарии

, чтобы добавить комментарий.

Другие публикации

Таблица символов ASCII + Windows 1251
Список из 256 символов и их коды в ASCII.
607112
+46
Список MIME типов
Ниже приведён список MIME-заголовков и расширений файлов.
14071
+4
Коды клавиш клавиатуры для JQuery событий keydown, keyup и keypress
Список кодов клавиш стандартной клавиатуры на Windows и MacOS...
43807
-1
Пример парсинга html-страницы на phpQuery
phpQuery – это удобный HTML парсер взявший за основу селекторы, фильтры и методы jQuery, которые позволяют...
44171
+20
Скан-коды клавиш клавиатуры (scan codes)
Скан-код — числовой код, присвоенный каждой клавише в IBM-совместимых компьютерах, с помощью которого драйвер...
5950
+2
Мануал по созданию и форматированию excel файлов в PHPExcel
К сожалению разработчики прекратили поддержку и разработку проекта, но PHPExcel все равно остается популярной...
91070
+27