编写 iOS 滚动条以解决引导程序 4 轮播错误:单击/点击会导致其他不必要的滑动



问题与环境

从 CDN 运行 Bootstrap 4,目前有一个已知的错误影响iOS 设备上轮播,为此设计了修复 github #28558,但仍待处理,即尚未发布。修复程序于 3 月 27 日推出,但不幸的是,我们仍在等待包含修复程序的 Bootstrap v4.4.0,遗憾的是还没有发布日期

原因的简要概述

在 iOS 设备上播放滑动轮播后,Bootstrap 的carousel.js当前不会重置内部引导程序参数 (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 中工作,即使它仍然不像在我们的开发/测试环境中那样 100% 工作(即不使用控制按钮播放嵌入式视频)使用我们更大的桌面设备。但是,它确实适用于iOS,这是我们减少测试用例的主要原因,它清楚地显示了我们试图实现解决方法的错误,因此下面的CodePen适合我们的目的。

如何重现问题 (iOS)

尝试使用我们添加的"播放/暂停/停止"按钮,然后是">上一个/下一个轮播"按钮(不是滑动!),然后再次使用"播放/暂停/停止"按钮。它应该一切正常。

现在重复上述操作,而不是使用上一个/下一个按钮,在iOS屏幕上使用向左滑动或向右滑动触摸手势来移动轮播。之后尝试再次按下播放/暂停/停止按钮(或点击/单击任何地方),您会注意到它会强制在最后一个方向进行另一次不需要的滑动。

"手动"解决方法(有效!

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

左/向右滑动后,尝试向上/向下滑动(垂直手势),以便您注意到滚动条暂时亮起。现在,当您单击或点击屏幕上的任意位置时,它不会强制再次滑动,并且播放/暂停/停止按钮像以前一样工作。

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

到目前为止已尝试

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

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

哦,当然,我已经搜索了StackOverflow等解决方案,但不幸的是,我所看到的任何东西似乎都不起作用,我无法弄清楚如何做到这一点:(

[ 代码和要求结果 ]

代码笔:

带有嵌入式YouTube视频+控制按钮和触摸滑动的引导轮播

注意如前所述,此 CodePen 在 iOS 设备上完美运行,但由于某种原因,播放/暂停/停止按钮似乎在我们的测试桌面环境中不起作用,即使callPlayer()函数似乎暂时调用视频,但我们对此并不困扰,因为它似乎只是 CodePen(不是我们的测试环境)中的一个问题,并且它确实在测试所针对的iOS 设备上按预期工作。

所需结果

让 iOS滚动条以编程方式(来回)移动,这应该触发内部引导参数 (touchDeltaX) 的重置,从而绕过当前 Bootstrapcarousel.js代码中存在的现有错误,并提供解决方法,直到 Bootstrap v4.4.0(或 v5)发布。

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

无论如何,了解如何在iOS中以编程方式移动滚动条会很好,所以如果有人想对此发表评论,即使我现在正在关闭它,也请这样做。

相关内容

最新更新