CODEWITHSUNDEEP
htmlcsssvgd3.jsoverflow
Podelo
Podelo

Reputation: 386

disable scroll for a div with SVG

I have a SVG chart using d3js. We can add some points to this chart and move it. When I have a big page and so when we need to scroll it, it works with the mouse. But I have an input screen with multi-touch and in more I develop my app for mobile.

The input with the chart and the scroll aren't working together with an input touch. For example if I want to move my point it's the page which scroll and not my point wich move. It's not exactly the same bugs on firefox, IE and my Windows RT app.

You can see a little example here to test if you have an input touch, I guess tablet and smartphone will have the same behaviour than my PC with a touch screen. I have the following css to simulate a bigger app:

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

There is a way to do this?

I hope you understood my problem :)

Upvotes: 1

Views: 1788

Answers (2)

Podelo
Podelo

Reputation: 386

I finnaly found a solution with the pointer-events property in css

    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);

On touch start I just allow pointer events in my chart et disable overflow and in the other way for the touch end.

Upvotes: 0

Brandon Babb
Brandon Babb

Reputation: 186

I tested this on my phone and tried to research how to force a browser to stop scrolling with little success. The good news is your app allows a mobile user to place a new point really nicely.

To get the project done quick, you might need to create a set of controls that grabs an id of each existing point and allow the mobile user to move the desired point using buttons. The UI for such a set of controls could be minimal and intuitive if done well. You could set the UI to display:none and only show when the screen width/height is iPad size or less.

Upvotes: 1

Related Questions