简体   繁体   English

有没有一种方法可以禁用向右水平滚动,但允许向左水平滚动?

[英]Is there a way to disable right horizontal scrolling, but allow left horizontal scrolling?

Is there a way to disable right horizontal scrolling, but allow left horizontal scrolling? 有没有一种方法可以禁用向右水平滚动,但允许向左水平滚动?

let touches = []
window.addEventListener('touchmove', event => {
  event.preventDefault()
}, false)

window.addEventListener('touchstart', event => {
  touches[0] = event.touches[0].pageX
}, false)

window.addEventListener('touchend', event => {
  touches[1] = event.changedTouches[0].pageX
}, false)

It seems you would have to preventDefault() on the touchmove event. 看来您必须在touchmove事件上touchmove preventDefault()

touchmove returns list of touche touchmove返回touche列表

  1. touchmove event object has list of touches touchmove事件对象具有触摸列表
  2. get the first touch, and prevent default in all cases. 进行第一手触摸,并在所有情况下均避免出现默认情况。
  3. on move compare new x value with old x value 移动时将新x值与旧x值进行比较
  4. if nx - ox > 0 then move manually. 如果nx-ox> 0,则手动移动。

Example: http://codepen.io/anon/pen/LWQJvx 示例: http //codepen.io/anon/pen/LWQJvx

var old_x = null;

document.addEventListener('touchstart', function(e) {
  old_x = e.targetTouches[0].clientX;
}, false); 

document.addEventListener('touchcancel', function(e) {
  old_x = e.targetTouches[0].clientX;
}, false); 


document.addEventListener('touchmove', function(e) {
  var touch = e.touches[0];
  if (touch.clientX - old_x < 0 ) {
    document.body.scrollLeft +=  old_x - touch.clientX;
  }
  old_x = touch.clientX;
  e.preventDefault();
  return false;   
}, { passive: false });

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM