javascript - 如何防止Leaflet点击缩放按钮时滚动页面？

Question

我在 HTML 页面上有一张传单 map 。当页面滚动以使 map 的任何部分位于视口(viewport)之外并且我单击缩放按钮时， map 会跳转以使其在视口(viewport)中完全可见。如果整个 map 不适合，则 map 的顶部将与视口(viewport)的顶部对齐，而底部则悬卡在末端。

这很烦人，因为用户刚刚按下的缩放按钮不再位于光标下方，他们必须再次找到它。

我尝试了内置缩放栏和自定义缩放栏(其中使用map.setZoom())并且行为是一致的。但是，示例映射到 https://leafletjs.com不要这样做，所以我不知所措。

我的 map 非常简单:

var home = {center: L.LatLng(51.499725, -0.124695), zoom: 11};
var mymap = L.map('map').setView(home.center, home.zoom);

This question听起来与我所看到的类似，但比我的情况更复杂。无论如何，没有解决办法。

编辑:这是 html 和 CSS，但它是非常基本的。

map.html

    <div class="container mx-sm-3">
        <div class="row">
            <div class="col">
                <div id="map"></div>
            </div>
        </div>
    </div>

map.css

#map {
    height: 570px;
    width: 700px;
}

Answer 1

罪魁祸首是this line of code :

this._map.getContainer().focus();

这背后的理由是什么？ map 容器必须具有 focus以便键盘事件通过它进行路由。单击缩放按钮会将焦点设置在按钮本身上，并导致 map 在某些情况下行为异常。

但是焦点的一个副作用是，焦点 HTML 元素将使用户代理(Web 浏览器)将其滚动到 View 中，因为假设用户在进行任何键盘输入之前希望看到焦点元素它。

有了这些知识，我将以两种不同的方式重新表述您的问题:

I do not need the map element to be focused at all. How do I prevent Leaflet from focusing the map after clicking on the zoom buttons?

通过创建 _refocusOnMap() private method of L.Control什么也不做。

这可以通过猴子修补来快速而肮脏地完成:

L.Control.prototype._refocusOnMap = function _refocusOnMap() {};

记住在实例化 map 之前先打猴子补丁。 “干净”将是 create subclasses L.Control 和/或 L.Control.Zoom，基于此。如果您有自己的缩放控件，还可以提供自定义 _refocusOnMap 方法，而不是依赖父类提供的方法。

I would like the keyboard controls to keep working, but I do not want to scroll the whole map into view after pressing the zoom buttons. Can the map be focused but skipping the "scroll into view" business?

是的，但有注意事项。

focus method of HTMLElements接受一个 options 参数，该参数可以保存 preventScroll 选项。

因此您可以通过以下方式对 _refocusOnMap() 进行猴子修补:

L.Control.prototype._refocusOnMap = function _refocusOnMap(ev) {
    // if map exists and event is not a keyboard event
    if (this._map && ev && ev.screenX > 0 && ev.screenY > 0) {
        this._map.getContainer().focus({ preventScroll: true });
    }
};

但是请注意，support for preventScroll is not present in all browsers .

另一种方法是preventDefault map 上的focus 或focusin 事件，例如:

L.DomEvent.on(map.getContainer(), 'focus', L.DomEvent.preventDefault)

但是，由于网络浏览器之间的不一致，这可能不仅会停止滚动，还会停止聚焦，或者可能根本没有效果，具体取决于所使用的网络浏览器。