Question

我创建了一个包含click事件监听器的输入元素，该元素在触发时会运行一个函数，该函数使CSS规则“ display：block;”可见该元素。

此元素包含以下规则：

Server context: inputQueue length is 0
inputQueue: [].
Client context. Integer registered: 4: inputQueue length is 1
inputQueue: [4].
Server context: inputQueue length is 1
inputQueue: [4].
Server context: inputQueue length is 0
inputQueue: [].
Client context. Integer registered: 8: inputQueue length is 1
inputQueue: [8].
Server context: inputQueue length is 0
inputQueue: [].
Server context: inputQueue length is 1
inputQueue: [8].
Client context. Integer registered: 5: inputQueue length is 1
inputQueue: [5].
Server context: inputQueue length is 1
inputQueue: [5].
Server context: inputQueue length is 0
inputQueue: [].
Client context. Integer registered: 7: inputQueue length is 1
inputQueue: [7].
Server context: inputQueue length is 1
inputQueue: [7].

简而言之，此元素位于所有其他内容的顶部，因为我希望此输入元素位于移动屏幕的顶部，因为它运行自动完成功能，用于显示用户必须选择的结果

一切正常，我设法做到了，但是我正在努力的是在iOS chrome和safari中进行制作，以停止在整个页面上进行任何形式的滚动，并且仅在结果中具有滚动选项，例如当用户将注意力集中在输入框上时，用户可以自由向下滚动。仅在用户聚焦时才会发生这种情况。这是我尝试使用的相关代码：

.elementExample
{
    display:none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    width: 100vw;
    height: 100vh;
    background-color: white;
    font-size: 1.3em;
    overflow: hidden;
    -ms-overflow: hidden;
}

我尝试了一切。除非他们在显示的列表上滚动，否则如何阻止iOS用户在专注于输入时滚动？

Answer 1

“除iOS之外的所有设备都遵守overflow: hidden”-Will Po

看看Will关于它的精彩文章：

https://medium.com/jsdownunder/locking-body-scroll-for-all-devices-22def9615177

如何在Chrome或Safari的iOS上停止停止滚动-CSS / JavaScript或jQuery

1 个答案: