【问题标题】:How to restore default scrolling behaviour on arcGIS?如何恢复 arcGIS 上的默认滚动行为?
【发布时间】:2018-11-21 15:04:16
【问题描述】:

我在使用带有 arcGIS API 的地图时遇到一个问题:

当鼠标指针在地图上方时,默认页面滚动被阻止。我知道我可以在鼠标滚轮事件上使用 stopPropagation() 抑制滚动时的地图缩放,但这只会导致禁用缩放。页面仍然不滚动...

这会导致糟糕的用户体验,尤其是在页面内使用大/全屏地图时。

有什么想法吗?

【问题讨论】:

    标签: javascript scroll mousewheel arcgis-js-api stoppropagation


    【解决方案1】:

    使用下面的代码 (like the esri demo here) 禁用视图的滚动缩放不会阻止触发 DOM 元素 wheel 事件,这会阻止默认页面滚动;

      //this prevent the mapView to zoom on wheel but does not make the page to scroll as wanted
      view.on("mouse-wheel", function(event) {
        // disable mouse wheel scroll zooming on the view
        event.stopPropagation();
      });
    

    因此,您需要做的是在处理 esri 滚轮事件的 DOM 元素上添加一个滚轮事件侦听器,然后执行 event.stopImmediatePropagation() 以便不会触发取消默认页面滚动的 esri 滚轮事件。

    使用 API v.4.9,您必须使用的 DOM 元素具有 esri-view-surface

      var viewSurfaceElem = document.getElementsByClassName("esri-view-surface")[0];
      viewSurfaceElem.addEventListener("wheel", function(event) { event.stopImmediatePropagation(); });
    

    在此处查看现场演示:https://codepen.io/anon/pen/bQLwwm

    【讨论】:

    • 就是这样。非常感谢!
    • 感谢您的回答。效果很好。现在我有另一个类似的问题:由于我只能通过 iFrame 嵌入客户端的应用程序,因此存在相同的滚动问题。我可以检查设置中的“✓防止地图滚动”选项,但是当鼠标光标位于地图上方时,页面仍然停止滚动。由于 iframe 以全屏尺寸嵌入,因此它完全阻止页面滚动。知道如何解决这个问题吗?感谢您的帮助。
    • 我不太清楚这个问题,你能提供一个问题的演示吗?据我了解,您是否只需将 overflow-y: auto; 添加到 iframe css 中?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-05-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多