我们怎样才能强迫帆布保持静止

Question

一个人怎么可以强制帆布保持不动，而你就可以借鉴Android手机？我们在离子，在下面的代码是用来允许最终用户绘制canvas元素上的一个项目，但他开始绘制，页面滚动与他的时候。

很奇怪，虽然，代码从向上滚动，如果用户拖动左边或右边时停止形式，但如果他们把他们的手指向上或向下睡前向左或向右，页面滚动他们的平局走势，和他们结了基本上没有什么正在绘制...

有谁知道怎样才能迫使滚动持有，而用户画的画布上的？

//employer_signature_canvas setup
var employer_signature_canvas = document.getElementById("employer_my_canvas");
var ctx = employer_signature_canvas.getContext("2d");
ctx.strokeStyle = "#222222";
ctx.lineWith = 2;

// Set up mouse events for drawing
var drawing = false;
var mousePos = { x:0, y:0 };
var lastPos = mousePos;
employer_signature_canvas.addEventListener("mousedown", function (e) {
        drawing = true;
  lastPos = getMousePos(employer_signature_canvas, e);
}, false);
employer_signature_canvas.addEventListener("mouseup", function (e) {
  drawing = false;
}, false);
employer_signature_canvas.addEventListener("mousemove", function (e) {
  mousePos = getMousePos(employer_signature_canvas, e);
}, false);

// Get the position of the mouse relative to the employer_signature_canvas
function getMousePos(employer_signature_canvasDom, mouseEvent) {
  var rect = employer_signature_canvasDom.getBoundingClientRect();
  return {
    x: mouseEvent.clientX - rect.left,
    y: mouseEvent.clientY - rect.top
  };
}

// Get a regular interval for drawing to the screen
window.requestAnimFrame = (function (callback) {
        return window.requestAnimationFrame || 
           window.webkitRequestAnimationFrame ||
           window.mozRequestAnimationFrame ||
           window.oRequestAnimationFrame ||
           window.msRequestAnimaitonFrame ||
           function (callback) {
        window.setTimeout(callback, 1000/60);
           };
})();

// Draw to the employer_signature_canvas
function renderemployer_signature_canvas() {
  if (drawing) {
    ctx.moveTo(lastPos.x, lastPos.y);
    ctx.lineTo(mousePos.x, mousePos.y);
    ctx.stroke();
    lastPos = mousePos;
  }
}

// Allow for animation
(function drawLoop () {
  requestAnimFrame(drawLoop);
  renderemployer_signature_canvas();
})();



    // Set up touch events for mobile, etc
employer_signature_canvas.addEventListener("touchstart", function (e) {
        mousePos = getTouchPos(employer_signature_canvas, e);
  var touch = e.touches[0];
  var mouseEvent = new MouseEvent("mousedown", {
    clientX: touch.clientX,
    clientY: touch.clientY
  });
  employer_signature_canvas.dispatchEvent(mouseEvent);
}, false);
employer_signature_canvas.addEventListener("touchend", function (e) {
  var mouseEvent = new MouseEvent("mouseup", {});
  employer_signature_canvas.dispatchEvent(mouseEvent);
}, false);
employer_signature_canvas.addEventListener("touchmove", function (e) {
  var touch = e.touches[0];
  var mouseEvent = new MouseEvent("mousemove", {
    clientX: touch.clientX,
    clientY: touch.clientY
  });
  employer_signature_canvas.dispatchEvent(mouseEvent);
}, false);

// Get the position of a touch relative to the employer_signature_canvas
function getTouchPos(employer_signature_canvasDom, touchEvent) {
  var rect = employer_signature_canvasDom.getBoundingClientRect();
  return {
    x: touchEvent.touches[0].clientX - rect.left,
    y: touchEvent.touches[0].clientY - rect.top
  };
}

// Prevent scrolling when touching the employer_signature_canvas
document.body.addEventListener("touchstart", function (e) {
  if (e.target == employer_signature_canvas) {
    e.preventDefault();
  }
}, false);
document.body.addEventListener("touchend", function (e) {
  if (e.target == employer_signature_canvas) {
    e.preventDefault();
  }
}, false);
document.body.addEventListener("touchmove", function (e) {
  if (e.target == employer_signature_canvas) {
    e.preventDefault();
  }
}, false);

Answer 1

在你的模板（离子页面），您可以使用CSS来去除反弹和橡皮筋效应：

<ion-content no-bounce class="no-scroll"><ion-content>

在您的SCSS：

.no-scroll .scroll-content {
    overflow: hidden;
    float: none;
}