将iOS滚动条编码为解决方法,Bootstrap 4 Carousel错误:单击/点击会导致其他不必要的滑动

问题描述 投票:0回答:1

问题与环境

正在运行来自CDN的引导程序4,并且目前存在一个已知错误,该问题影响了[[iOS设备上的旋转木马,已针对其设计了修复程序github #28558,但仍在进行中,即NOT尚未发布。该修复程序于3月27日推出,但不幸的是,我们仍在等待Bootstrap v4.4.0,其中包含该修复程序,可悲的是,发布日期尚未发布。

原因简介

在iOS设备上的

SWIPE

轮播之后,Bootstrap的carousel.js当前未重置内部Bootstrap参数(touchDeltaX),因此,任何

随后的轻击

clicks将导致进一步的不必要的滑动建议的解决方法

我们注意到,任何

垂直滚动手势

调用滚动条

似乎都以某种方式重置此不必要的操作,因此它应该为解决方法铺平道路。
我最初怀疑这应该很简单,可能只是一行代码。但是现实是我被卡住了,似乎无法弄清楚该怎么做,以编程方式在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)

尝试使用我们添加的

PLAY / PAUSE / STOP

按钮,接着是

PREV / NEXT

轮播按钮(NO SWIP]!),然后是PLAY / PAUSE / STOP 按钮。一切都应该很好。现在重复上面的操作,而不是使用PREV / NEXT按钮,而是使用iOS屏幕上的向左滑动或向右滑动触摸手势来移动转盘。然后,尝试再次按

PLAY / PAUSE / STOP

按钮(或点击/单击任意位置),您会发现它迫使最后一个UNWANTED滑动到最后一个方向。
“手动”解决方法(有效!)>

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

向左/向右滑动]之后,尝试

向上/向下滑动

(垂直手势),以使您注意到滚动条暂时点亮。现在,当您单击或点击屏幕上的任意位置时,它不会再次滑动,并且PLAY / PAUSE / STOP按钮将像以前一样工作。但是,这只是出于演示目的的手动解决方法,因为从用户的角度来看,[ 在实时环境中!]!

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

NB

您可以说代码在我们的测试环境中可以正常运行,因为

SWIPE

不仅可以移动到下一张幻灯片,还可以

点亮

滚动条临时,而使用PREV / NEXT按钮将NOT点亮滚动条!哦,当然我已经搜索了StackOverflow等以寻求解决方案,但不幸的是,我所看的东西似乎都没有用,而且我还无法弄清楚如何做到这一点:(

[代码和请求结果]

CodePen:

Bootstrap carousel with embedded YouTube videos + control buttons & touchswipe

NB

如前所述,此CodePen

works在

iOS设备上完美使用,但是PLAY / PAUSE / STOP

按钮似乎不适用于我们的测试桌面环境尽管callPlayer()函数似乎暂时调用了视频,但由于某些原因,我们对此并不感到困扰,因为它似乎只是CodePen(不是我们的测试环境)中的问题,并且它确实可以在iOS设备上正常工作,测试是为了。必填结果获取iOS

滚动条以编程方式移动

(来回移动),它应该

触发重置

内部Bootstrap参数(touchDeltaX),从而规避了当前Bootstrap carousel.js代码中存在的现有错误。并提供一种解决方法,直到发布Bootstrap v4.4.0(或v5)。

[问题和环境正在从CDN运行Bootstrap 4,目前有一个已知的错误会影响iOS设备上的Carousel,为此,他们设计了一个修复程序github#28558,但仍未解决,即NOT ...] >> [[

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

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

javascript ios bootstrap-4 carousel hammer.js
1个回答
© www.soinside.com 2019 - 2024. All rights reserved.