javascript - 有没有办法禁用右侧水平滚动,但允许左侧水平滚动?

标签 javascript

有没有办法禁用右侧水平滚动,但允许左侧水平滚动?

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)

看来您必须在 touchmove 事件上preventDefault()

最佳答案

touchmove 返回 touche 列表

  1. touchmove事件对象有触摸列表
  2. 获得第一次接触,并在所有情况下防止违约。
  3. 移动时比较新的 x 值与旧的 x 值
  4. 如果 nx - ox > 0 则手动移动。

示例: 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 });

关于javascript - 有没有办法禁用右侧水平滚动,但允许左侧水平滚动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42866799/

相关文章:

javascript - 如何将 Javascript 对象与索引数据库同步?

javascript - 从文件夹 Javascript/Jquery 读取图像到网页

javascript - 仅使用我的代码在 Visual Studio 2013 中调试 Javascript

javascript - Html javascript 提交不同的表单相同的数据类型,2 个按钮

javascript - 如何将ID添加到jquery插件选择器中

javascript - MaterializeCSS Timepicker 无法设置初始时间?

php - 如何保护客户端代码

javascript - 使用动态 id 在动态 'div' 中附加动态 'div' s

javascript - 如何使用正则表达式在全文中查找 URL

javascript - 如果传递模型,属于渲染助手的 Controller 将被重置