代码 iOS 滚动条解决方法 Bootstrap 4 旋转木马错误：Click/Tap 导致额外的不需要的滑动

Question

问题与环境

运行 Bootstrap 4 来自 CDN，目前有一个 已知错误 影响 iOS 设备 上的 Carousel 已为其设计修复 github #28558，但仍未决，即 NOT 尚未发布。修复于 3 月 27 日引入，但不幸的是我们仍在等待 Bootstrap v4.4.0，其中包含修复，遗憾的是 NO 发布日期。

原因简要总结

在 iOS 设备上 SWIPE 轮播后，Bootstrap 的 carousel.js 当前不会重置内部 Bootstrap参数 (touchDeltaX)，因此任何后续点击或点击将导致进一步不需要的滑动。

提议的修复

我们注意到任何调用滚动条的垂直触摸手势似乎以某种方式重置了这个不需要的动作，因此它应该为解决方法铺平道路。

我最初怀疑这应该很简单，可能只是一行代码。然而现实是我被卡住了，似乎无法弄清楚如何做到这一点，以编程方式在 iOS 设备上移动滚动条:(

尝试使用 window.scrollBy(0,1); 和 window.scrollBy(0,-1); 来回移动滚动条似乎在 iOS 设备上不起作用，尽管 srollBy 在我们的测试桌面环境中似乎工作正常但不在我们的 iOS 设备上。

  function scrollY() {
    if (hasTouchscreen){
       window.scrollBy(0,1);
       window.scrollBy(0,-1);
     }
  }

我创建了一个 CodePen（见下文）来显示我们简化的测试用例，但由于某些原因我们的代码需要稍微调整一下以在 CodePen 内部工作，即使它仍然不能像在我们的 dev/test 环境中那样 100% 工作（即不使用控制按钮播放嵌入式视频）使用我们更大的桌面设备。然而，它确实适用于 iOS，这是我们减少测试用例的主要原因，它清楚地显示了我们正在尝试为其实施解决方法的错误，因此下面的 CodePen 适合我们的目的。

如何重现问题 (iOS)

尝试使用我们添加的PLAY/PAUSE/STOP按钮，然后是PREV/NEXT轮播按钮（不要滑动！) 然后再次点击 PLAY/PAUSE/STOP 按钮。它应该一切正常。

现在重复上述操作，而不是使用 PREV/NEXT 按钮，而是在 iOS 屏幕上使用向左滑动或向右滑动触摸手势来移动旋转木马。之后尝试再次按下 PLAY/PAUSE/STOP 按钮（或 tap/click 任何地方），您会注意到它会强制另一个 UNWANTED 滑动最后一个方向。

"manual" 解决方法（有效！）

我相信垂直 gesture/scroll 将为我们提供解决方法的原因是：

在 SWIPE LEFT/RIGHT 之后，尝试 SWIPE UP/DOWN（垂直手势），以便您注意到滚动条暂时亮起。现在，当您单击或点击屏幕上的任意位置时，它不会强制再次滑动并且 PLAY/PAUSE/STOP 按钮像以前一样工作。

然而，这只是用于演示目的的手动解决方法，因为从用户的角度来看，在实际环境中不可接受！

到目前为止已经试过了

在 JS 部分的末尾有一个 function scrollY()，它执行 window.scrollBy(0,1); 和 window.scrollBy(0,-1); 来尝试移动滚动条，尽管这似乎在我们的测试环境似乎不会影响 iOS 滚动条。

NB 您可以看出代码在我们的测试环境中工作，因为 SWIPE 不仅移至下一张幻灯片，它还 暂时点亮滚动条，而使用PREV/NEXT按钮将不点亮滚动条！

哦，当然，我已经在 Whosebug 等网站上搜索了解决方案，但不幸的是，我所看到的似乎都没有用，而且我一直无法弄清楚如何做到这一点:(

[代码和请求结果]

代码笔：

Bootstrap carousel with embedded YouTube videos + control buttons & touchswipe

NB 如前所述，此 CodePen 可在 iOS 设备 上完美运行 ，但是 PLAY/PAUSE/STOP 按钮似乎由于某种原因在我们的测试桌面环境中不起作用，尽管 callPlayer() 功能似乎暂时调用了视频，但我们我并不为此烦恼，因为它似乎只是 CodePen 中的一个问题（而不是我们的测试环境），并且它确实在测试所针对的 iOS 设备上按预期工作。

要求的结果

让 iOS 滚动条以编程方式移动（来回），这应该 触发内部 的重置 =198=] param (touchDeltaX)，从而绕过当前 Bootstrap carousel.js 代码中存在的错误，并在 Bootstrap v4.4.0（或 v5）发布之前提供解决方法。

Answer 1

Bootstrap v4.4.0 终于发布并修复了问题。

无论如何，如果能找出如何在 iOS 中以编程方式移动滚动条，那就太好了，所以如果有人想对此发表评论，请尽管我现在要关闭它。

代码 iOS 滚动条解决方法 Bootstrap 4 旋转木马错误：Click/Tap 导致额外的不需要的滑动

Code iOS scrollbars to workaround Bootstrap 4 Carousel Bug: Click/Tap causes additional unwanted swipes

javascript

carousel

ios

hammer.js

bootstrap-4