Javascript 如何使用移动设备的触摸事件在固定容器中滚动图像？

我正在开发一个解决方案，在这个解决方案中，我在固定容器div中有一个长图像。我想要实现的是，每当用户滑动图像的一部分时，它都应该是可见的

我已经实现了它的基本功能，但它不能正常工作。当我在webkit浏览器上检查它时，它看起来在滚动时有点颠簸，它根本不工作

这是我的代码。它是基本的300x250广告创意

const target=document.querySelector（'#scrollbg'）；
var clientX，clientY；
target.addEventListener（'touchstart'，函数（e）{
clientX=e.changedTouches[0].clientX；
clientY=e.changedTouches[0]。clientY；
}，对）；
target.addEventListener（'touchmove'，函数（事件）{
var deltaY；
deltaY=event.changedTouches[0].clientX-clientX；
常量toLeft=deltaY<0&&target.scrollLeft>0
const-toRight=deltaY>0&&target.scrollLeft
：：-webkit滚动条{
宽度：1px；
高度：1px；
}
：-webkit滚动条按钮{
宽度：1px；
高度：1px；
}
html，正文{
字体系列：开放式SAN；
}
.ad300x250_容器{
宽度：300px；
高度：250px；
浮动：左；
位置：相对位置；
}
.img集装箱{
宽度：300px；
溢出-x：滚动；
溢出：滚动；
-webkit溢出滚动：触摸；
}
.ad300x250_操作按钮{
背景:#058562；
边界半径：5px；
颜色：#fff；
边框颜色：#058562；
字体大小：14px；
字号：700；
字体系列：开放式SAN；
边框样式：实心；
文本对齐：居中；
宽度：80%；
填充：5px15px；
宽度：130px；
位置：绝对位置；
顶部：165px；
左：80px；
盒影：0 8px 6px-6px#999；
}
.ad_本地_容器{
浮动：左；
高度：50px；
}
.ad300x250_图标{
浮动：左；
宽度：42px；
高度：50px
}
.ad300x250_图标img{
宽度：42px；
高度：42px；
边界半径：4px；
保证金：1px；
利润上限：4倍；
利润底部：4倍；
}
.ad300x250_title_容器{
浮动：左；
宽度：200px；
高度：50px；
左边距：10px；
边际上限：0px；
}
.ad300x250_标题{
字体系列：开放式SAN；
字号：700；
字体大小：15px；
颜色：#000；
溢出：隐藏；
文本溢出：省略号；
线高：14px；
填充顶部：6px
}
.ad300x250_操作_容器{
浮动：左
}
.ad300x250_说明{
清除：左；
浮动：左；
高度：25px；
边缘顶部：5px；
}
.ad300x250_说明_文本{
字体系列：开放式SAN；
字体大小：14px；
颜色：#666；
溢出：隐藏；
文本溢出：省略号；
}
.ad300x250_操作_容器按钮{
高度：27px；
背景:#058562；
边界半径：4px；
颜色：#fff；
边框颜色：#058562；
字体大小：12px；
字号：700；
字体系列：开放式SAN；
边框样式：实心；
位置：绝对位置；
右：0；
顶部：11px；
显示器：flex；
填充：2x15px
}
.ad300x250_说明_额定值{
字体大小：14px；
}
.ad_媒体_容器{
清除：左；
浮动：左；
高度：200px；
}

安装1
快餐视频
1.6  ★  自由的
我正在查看您的代码，也许这是一个愚蠢的答案，但是您使用js来控制其滚动是否有原因？特别是如果您只需删除js代码的这一部分，您的滚动将很好：

  if (toLeft || toRight) {
    event.preventDefault()
    target.scrollLeft += deltaY
  }
  if (event.cancelable) {
    event.preventDefault();
  } 

请点击此处：

示例如下：


const target=document.querySelector（'#scrollbg'）；
var clientX，clientY；
target.addEventListener（'touchstart'，函数（e）{
clientX=e.changedTouches[0].clientX；
clientY=e.changedTouches[0]。clientY；
}，对）；
target.addEventListener（'touchmove'，函数（事件）{
var deltaY；
deltaY=event.changedTouches[0].clientX-clientX；
常量toLeft=deltaY<0&&target.scrollLeft>0
const-toRight=deltaY>0&&target.scrollLeft
：：-webkit滚动条{
宽度：1px；
高度：1px；
}
：-webkit滚动条按钮{
宽度：1px；
高度：1px；
}
html，正文{
字体系列：开放式SAN；
}
.ad300x250_容器{
宽度：300px；
高度：250px；
浮动：左；
位置：相对位置；
}
.img集装箱{
宽度：300px；
溢出-x：滚动；
溢出：滚动；
-webkit溢出滚动：触摸；
}
.ad300x250_操作按钮{
背景:#058562；
边界半径：5px；
颜色：#fff；
边框颜色：#058562；
字体大小：14px；
字号：700；
字体系列：开放式SAN；
边框样式：s