Javascript 如何在手机上水平拖动fabricJS画布？

我正在尝试创建一个比我的移动屏幕更宽的画布，用户可以左右拖动来查看画布的其余部分。但由于某些原因，从画布内部拖动不起作用

如果我在页面下方（画布外部），页面可以左右拖动，但不能在画布内部拖动。我怎样才能解决这个问题

理想情况下，我只希望画布中有一个滚动条，这样人们可以在手机上左右拖动，而不会增加整个页面的宽度

我尝试在画布上设置

overflow:scroll

，但仍然无法拖动它。我还添加了

指针事件：无，这允许在画布中聚焦时拖动，但拖动整个页面，而不仅仅是在画布中

我能做什么

片段：



图像测试
.酒盒{
宽度：100%！重要；
文本对齐：居中；
背景色：#fff！重要；
颜色：#fff！重要；
盒影：3p2px15px 6px rgb（0/10%）；
边界半径：5px；
}
黑文字先生{
颜色：#383838；
字体系列：潘顿；
字体大小：15px；
}
身体，歪箭{
颜色：#fff！重要；
}
.蒂皮酒{
填充：0px；
}
.tooltipwrap{
显示器：flex；
弯曲方向：行反向；
}
.tooltipinfo{
文本对齐：左对齐；
填充：0px 0px 15px 15px；
显示器：flex；
弯曲方向：立柱；
}
.tooltipinfo h2{
边缘顶部：15px；
边缘底部：0px；
字号：800；
字体系列：潘顿；
字体大小：22px；
}
.tooltipinfo.sub{
颜色：#B0；
字号：600；
}
.tooltipinfo.子底部{
背景色：#439fdd；
显示：内联块；
位置：相对位置；
颜色：#fff；
填充物：3px 5px；
边界半径：5px；
宽度：最大含量；
边缘顶部：5px；
字号：18px；
}
.tooltipwrap img{
高度：220px；
宽度：190px；
对象匹配：覆盖；
边界半径：0px 5px 0px；
左侧填充：15px；
}
身体{
边际：0px；
}
坎瓦斯蒂普先生{
背景色：#009fe3；
边框：3px实心#ccc；
}
.canvastip:悬停{
背景色：#009fe3；
边框：3px实心#FFF；
边界半径：18px；
盒影：0 0 2px#888；
}
试验
戈迪伊宁
打印我的本杰明·戈尔迪伊宁。
v、 a.18欧元-p/m2
戈尔迪伊宁维多利亚酒店
打印我的本杰明·戈尔迪伊宁。
v、 a.18欧元-p/m2
福托布洛克
打印我的本杰明·戈尔迪伊宁。
v、 a.18欧元-p/m2
福托帕内尔
打印我的本杰明·戈尔迪伊宁。
v、 a.18欧元-p/m2
齐扎克
打印我的本杰明·戈尔迪伊宁。
v、 a.18欧元-p/m2
库森
打印我的本杰明·戈尔迪伊宁。
v、 a.18欧元-p/m2
萨洛塔菲尔德
打印我的本杰明·戈尔迪伊宁。
v、 a.18欧元-p/m2
六边形fotocollection
打印我的本杰明·戈尔迪伊宁。
v、 a.18欧元-p/m2
三维字母
打印我的本杰明·戈尔迪伊宁。
v、 a.18欧元-p/m2
塔菲尔克利德
打印我的本杰明·戈尔迪伊宁。
v、 a.18欧元-p/m2
罗尔戈迪金
打印我的本杰明·戈尔迪伊宁。
v、 a.18欧元-p/m2
兰姆贴纸
打印我的本杰明·戈尔迪伊宁。
v、 a.18欧元-p/m2
德斯提尔魔杖
打印我的本杰明·戈尔迪伊宁。
v、 a.18欧元-p/m2
Foto有机玻璃
打印我的本杰明·戈尔迪伊宁。
v、 a.18欧元-p/m2
Foto op RVS
打印我的本杰明·戈尔迪伊宁。
v、 a.18欧元-p/m2
（功能（）{
函数重新渲染器（）{
var myImg=document.querySelector（“背景”）；
var realWidth=window.innerWidth；
var realHeight=myImg.naturalHeight；
var source=document.getElementById（'background'）.src；
var canvas=newfabric.canvas（'c'）；
canvas.hoverCursor='pointer'；
canvas.selection=false；
canvas.setDimensions({
allowTouchScrolling：是的，
宽度：realWidth，
高度：真实高度
});
var img=新图像（）；
//使用加载回调将图像添加到画布。
img.src=https://printzelf.nl/new/assets/images/custom/WOONKAMER.jpg';
fabric.Object.NUM_分数_位数=10；
fabric.Image.fromURL（源、函数（img）{
img.scaleToWidth（canvas.width）；
canvas.setBackgroundImage（img）；
canvas.req
$('canvas').css('touch-action', 'manipulation');
(function(){
  var defaultOnTouchStartHandler = fabric.Canvas.prototype._onTouchStart;
  fabric.util.object.extend(fabric.Canvas.prototype, {
    _onTouchStart: function(e) {
      var target = this.findTarget(e);
      // if allowTouchScrolling is enabled, no object was at the
      // the touch position and we're not in drawing mode, then
      // let the event skip the fabricjs canvas and do default
      // behavior
      if (this.allowTouchScrolling && !target && !this.isDrawingMode) {
        // returning here should allow the event to propagate and be handled
        // normally by the browser
        return;
      }
      // otherwise call the default behavior
      defaultOnTouchStartHandler.call(this, e);
    }
  });
})();