javascript - 将iOS滚动条编码为变通办法Bootstrap 4 Carousel错误:单击/点击会导致其他不必要的滑动

Question

问题与环境

从CDN运行Bootstrap 4，目前有一个已知的错误会影响iOS设备上的Carousel，已针对该设备设计了修复程序github #28558，但仍未解决，即尚未发布。该修复程序于3月27日推出，但不幸的是，我们仍在等待Bootstrap v4.4.0，其中包含该修复程序，可悲的是，尚无发布日期。



原因简述

在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按钮（或在任意位置点击/单击），您会发现它迫使最后一次方向再次进行不必要的滑动。



“手动”解决方法（有效！）

我相信垂直手势/滚动将为我们提供解决方法的原因是因为：

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

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



到目前为止尝试过

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

注意：您可以说代码在我们的测试环境中有效，因为SWIPE不仅会移动到下一张幻灯片，还会暂时点亮滚动条，而使用PREV / NEXT按钮不会点亮滚动条！

哦，当然，我已经搜索了StackOverflow等以寻求解决方案，但不幸的是，我所看的东西似乎都没有用，而且我还无法弄清楚如何做到这一点:(



[代码和请求结果]

CodePen：

Bootstrap carousel with embedded YouTube videos + control buttons & touchswipe



注意：如前所述，此CodePen可以在iOS设备上完美运行，但是由于某些原因，即使 callPlayer()函数似乎暂时调用了视频，PLAY / PAUSE / STOP按钮在我们的测试桌面环境下也似乎不起作用。不必为此烦恼，因为这似乎只是CodePen（不是我们的测试环境）中的问题，并且它确实在预期测试的iOS设备上正常工作。



所需结果

获取iOS滚动条以编程方式来回移动（来回移动），这将触发内部Bootstrap参数（touchDeltaX）的重置，从而规避当前Bootstrap carousel.js代码中存在的现有错误，并提供一种解决方法，直到Bootstrap v4.4.0（或v5）已发布。

Answer 1

Bootstrap v4.4.0最终发布并解决了该问题。

无论如何，最好能找到在iOS中以编程方式移动滚动条的方法，因此，即使有人要对此发表评论，也请这样做，即使我现在将其关闭。