With OnsenUI how do I disable page scroll and pull-to-refresh when dragging on a graph element?

Question

I am creating an app using Cordova and OnsenUI. OnsenUI has a Pull-To-Refresh function. I am also displaying a graph using dygraphs. A user can pinch zoom the graph then drag the graph around to see different parts of the graph after it is zoomed in. However, once a users drags down on the graph, the graph moves but it also starts to active the pull-to-refresh. Also, if the users is using a small screen phone and you have to scroll down to see the graph, if they scroll the graph up, it causes the entire page to scroll up.

I am wondering how I can make the page scroll and pull-to-refresh not activate if the users is touching or moving (I believe 'touch' and 'touchmove') the graph, but once they stop touching the graph, the normal functionality of the page scroll and pull-to-refresh will work again.

Thank you.

Answer 1

You can easily achieve this considering that ons-pull-hook has a disabled attributed (Documentation).

Wrap your graph in a div element with id="myGraph" and set the disabled attribute when a touch action has been performed in the div element. Once the touch action ends, the ons-pull-hook should be enabled again.

Here is the code:

ons.ready(function() {
  var graph = document.getElementById("myGraph");
  var pullHook = document.querySelector("ons-pull-hook");

  graph.addEventListener('touchstart', function () {
    pullHook.setAttribute("disabled", true);
  });

  graph.addEventListener('touchend', function () {
    graph.removeAttribute("disbled");
  });
});

Hope it helps!