Leaflet/JS：单击默认滚动条外部时侧边栏会重置

Question

我正在为一项学校作业制作传单网站。为了使其在手机上更加友好，我将覆盖控制菜单移动到一个交互式侧边栏，用 <button> 打开（现在隐藏），就像这样（抱歉有些文本是捷克语，但它们不应该与我的问题相关）：layers when opening sidebar.

如果我然后滚动 like this 并单击圆圈符号，图层会正确添加，但侧边栏的滚动级别会重置回第一个状态。

我希望我的侧边栏滚动级别在单击任何滚动外符号后保持不变。我试过在单击时保存滚动级别，然后再将其更改回来，但过渡并不流畅，即使超时时间很短。

有没有办法禁用这个“自动滚动刷新”？在我看来，它以某种方式连接到 Leaflet 更新地图上显示的图层，但老实说我不知道。

Answer 1

我有一个项目有类似的问题，最后，我只是减少了按钮的数量，并将它们的图标缩小了几个像素，这样它们就可以适应任何iPhone，三星、小米等我给你一个项目的例子（早期阶段），你可以看到结果。 免责声明：我隶属于该网站；这是我的个人研究网站，但那里的垃圾邮件为零！ Danger-free 区域保证，哈哈！ 在笔记本电脑和 phone 上看一看，看看区别和源代码。 Ancient Rome Leaflet Map, earliest beginnings during the time of King Romulus

Answer 2

所以事实证明我最初的想法是保存滚动位置并在点击后更新它是正确的方法，我只需要调整 CSS 属性 scroll-behavior .这是我的代码的一部分，它为可能遇到相同问题的任何人展示了完整的解决方案：

Leaflet：
（一个覆盖层，它是 overlays 字典的一部分，后来用作 L.control.layers 的输入）

// previous overlay layers above
"<table><tr><th><img src='./img/graves.png' onclick='resetScroll()'/></th><td><p>hrobky</p></td></tr></table>":L.geoJSON(graves).setStyle({
     color: "#669999",
     weight: "1",
     fillColor: "#669999",
     fillOpacity: "0.5"
}),
// remaining overlay layers below

JS 函数 在 <img> 元素上调用了 onClick 我曾经 activate/deactivate 层：

function resetScroll() {
     let scroll_position = document.querySelector(".leaflet-control-layers-scrollbar").scrollTop;
     window.setTimeout(() => {
          document.querySelector(".leaflet-control-layers-scrollbar").scrollTop = scroll_position;
     }, 1);
}

CSS:

.leaflet-control-layers-scrollbar {
     scroll-behavior: smooth;
}

我知道这可能不是实现我想要的最有效或最优雅的方法，但它仍然有效。

Leaflet/JS：单击默认滚动条外部时侧边栏会重置

Leaflet/JS: Sidebar Resets When Clicking Outside of Default Scroll

javascript

css

scroll

sidebar

leaflet