Question

我有一个使用d3js的SVG图表。我们可以在此图表中添加一些点并移动它。当我有一个大页面，所以当我们需要滚动它时，它适用于鼠标。但是我有一个带有多点触控的输入屏幕，而且我开发的移动应用程序更多。

带有图表和滚动的输入不能与输入触摸一起使用。例如，如果我想移动我的观点，那就是滚动的页面而不是我的观点。它与firefox，IE和我的Windows RT应用程序上的错误并不完全相同。

您可以看到一个小例子here来测试您是否有输入触摸，我猜平板电脑和智能手机的行为与我的带触摸屏的电脑相同。我有以下css来模拟更大的应用程序：

body {
overflow:visible;
width: 2000px;
height: 2000px;
}

有办法做到这一点吗？

我希望你理解我的问题：）

Answer 1

我在手机上对此进行了测试，并尝试研究如何强制浏览器停止滚动但收效甚微。好消息是你的应用程序允许移动用户非常好地提出新的观点。

为了快速完成项目，您可能需要创建一组控件来抓取每个现有点的ID，并允许移动用户使用按钮移动所需的点。如果做得好，这样一组控件的UI可以是最小的和直观的。您可以将UI设置为display：none，仅在屏幕宽度/高度为iPad或更小时显示。

Answer 2

我终于在css

中找到了一个带有pointer-events属性的解决方案

    var C1 = document.getElementById("C1"),
      evtIn = window.navigator.msPointerEnabled ? "MSPointerDown" : "touchstart",
evtOut = window.navigator.msPointerEnabled ? "MSPointerUp" : "touchend";


C1.addEventListener(evtIn, function () {

    d3.select("#C1").style("pointer-events", "all");

    d3.select("body").style("overflow", "hidden");

}, false);

C1.addEventListener(evtOut, function () {

    d3.select("#C1").style("pointer-events", "none");

    d3.select("body").style("overflow", "auto");

}, false);

触摸开始时我只允许在我的图表中指针事件并禁用溢出，而另一种方式是触摸结束。

使用SVG禁用div的滚动

2 个答案: