关于朝鲜的新闻不能评论_在朝鲜，前端开发人员面临着甚至可能不存在的平台不一致问题...

重要的位&＃xff1a;

• position: fixed以将模态position: fixed在屏幕上&＃xff1b;
• height: 100vh使高度为视口的100&＃xff05;&＃xff1b;
• 情态分为两部分&＃xff1a;标题和正文&＃xff1b;
• 标头的高度由其子级定义&＃xff0c;无需显式设置&＃xff1b;
• 主体使用flex: 1填充剩余高度flex: 1 ;
• scroll-y &＃xff1a;当列表不适合时自动在正文中滚动。

在iOS上可以正常使用&＃xff1a;

但在Android上&＃xff0c;最后一项已被删除&＃xff1a;

为什么&＃xff1f;

当用户向下滚动时&＃xff0c;某些移动浏览器会隐藏地址栏。 这会更改可见的视口高度&＃xff0c;但不会更改100vh的含义。 因此100vh实际上比最初看到的要高。

您的模态的position: fixed &＃xff0c;因此您不需要使用vh单位。 height: 100%将正确填充可用高度&＃xff1a;

整齐&＃xff01; 这已经是对移动设备上的本地版本的改进。 现在&＃xff0c;您需要实现过滤器行为。

您非常确定&＃xff0c;您的Guiding Sun Ray不会遇到每次打开模态后都必须触摸过滤器输入的麻烦。 因此&＃xff0c;模态打开后&＃xff0c;您应该focus()过滤器输入。 这样&＃xff0c;键盘弹出&＃xff0c;用户可以立即开始键入。

在Android上一切看起来都不错&＃xff1a;

在iOS上&＃xff0c;一旦尝试滚动列表&＃xff0c;模态标题就会越界滚动&＃xff1a;

这是怎么回事&＃xff1f;

当您按“领导者”筛选时&＃xff0c;列表会变得足够小以适合屏幕而不滚动&＃xff0c;但前提是键盘不可见。 在Android上&＃xff0c;打开键盘会将视口缩小到可见区域。 但是在iOS上&＃xff0c;视口大小保持不变&＃xff1b; 它只是被键盘覆盖 。 iOS允许您在键盘打开的情况下滚动页面&＃xff0c;以显示页面的缺失部分。 这种行为可能会破坏position: fixed像您这样的position: fixed元素。

更糟糕的是&＃xff0c;无法知道键盘的高度&＃xff0c;或者根本不知道键盘的高度&＃xff08;用户可以使用硬件键盘&＃xff09;。 没有巧妙CSS技巧可以节省您的时间。

因此&＃xff0c;您需要一个可滚动的列表&＃xff0c;在其中可以访问所有项&＃xff0c;而又不知道屏幕下部的任意部分是否可见。 这是您的解决方法&＃xff1a;

您在列表的底部添加了一个空格&＃xff08;以绿色突出显示以提高可见性&＃xff09;。 此分隔符的高度是列表区域的高度减去一个元素。 这样&＃xff0c;始终可以一直滚动到底部&＃xff0c;将最后一个元素移到列表的顶部。

还有一些方法可以使模态滚动在视口之外&＃xff0c;您需要对其进行修补。

一种方法是在当前可见的所有不可滚动元素上滑动。 在您的情况下&＃xff0c;这就是模式标题。 您不能仅通过CSS禁用所有指针事件&＃xff0c;因为您需要内部元素&＃xff08;过滤器输入和关闭按钮&＃xff09;仍然可用。 解决方案是禁用touchmove事件上的滚动&＃xff1a;

const header &＃61; document .getElementById( &＃39;modal-header&＃39; )header.addEventListener( &＃39;touchmove&＃39; , event &＃61;> {event.preventDefault()
})

touchmove的默认React是滚动&＃xff0c;因此使用preventDefault&＃xff08;&＃xff09;进行阻止将使其不可滚动。

现在让我们绕个小弯路。 我一直在用HTML &＃43; Javascript编写这些示例&＃xff0c;以使本文更加通用。 但是在React开发中&＃xff0c;我遇到了这种变通方法。 这就是我在React中定义事件处理程序的方式&＃xff1a;

function handleTouchMove ( event ) {event.preventDefault()
}// …

期望可能是在普通Javascript中&＃xff0c;这将转换为如下形式&＃xff1a;

const element &＃61; document .getElementById( &＃39;element&＃39; )element.addEventListener( &＃39;touchmove&＃39; , event &＃61;> {// call the callback for this element
})

但是发生的事情更接近于此&＃xff08;不是真实的代码&＃xff09;&＃xff1a;

document .addEventListener( &＃39;touchmove&＃39; , event &＃61;> {const element &＃61; React.getElementFromEvent(event)// call the callback for this element
})

React在文档级别绑定事件&＃xff0c;而不是在每个单独节点级别绑定事件。 当我尝试preventDefault() React中的preventDefault()触摸事件时&＃xff0c;会发生以下情况&＃xff1a;

浏览器将其阻止。 该功能是通过Chrome更新引入的&＃xff0c;默认情况下将事件设置为“被动” &＃xff0c;并且在文档级别无法通过preventDefault阻止preventDefault 。 解决方案是在节点级别手动绑定事件&＃xff0c;而不是通过React的事件系统来完成&＃xff1a;

ref &＃61; React.createRef();componentDidMount() {ref.addEventListener(&＃39;touchmove&＃39; , handleTouchMove)
}function handleTouchMove ( event ) {event.preventDefault()
}// …

所以是的&＃xff0c;尤其是在React中&＃xff0c;这种解决方法需要一种解决方法。

在我撰写本文时&＃xff0c; React的事件系统正在被重写 &＃xff0c;因此在您阅读本文时&＃xff0c;该问题可能不再存在。

现在回到您的问题。

还有另一种方法可以使您的希望和梦想消失。 如果用户在没有其他要显示的项目时坚持滚动&＃xff0c;则视口可以向上滚动。 这些都不再让您困惑&＃xff0c;您只需在其中添加另一个解决方法&＃xff1a;

const modalBody &＃61; document .getElementById( &＃39;modal-body&＃39; )menuScroll &＃61; () &＃61;> {if (modalBody.scrollHeight - modalBody.scrollTop &＃61;&＃61;&＃61; modalBody.clientHeight) {modalBody.scrollTop -&＃61; 1}
}modalBody.addEventListener( &＃39;scroll&＃39; , menuScroll)

当滚动到达底部时&＃xff0c;将列表的滚动位置推离边缘一像素。 这样&＃xff0c;永远不会触发外部滚动。

该解决方案已经非常可靠&＃xff0c;但是您还需要改进一件事。 突然覆盖屏幕的模态可能有点刺耳。 如果阁下不注意而被吓到怎么办&＃xff1f; 谁来照顾您的孩子&＃xff1f;

一个简单的过渡动画可以使其更容易跟随。 也许您可以从屏幕底部滑动模态&＃xff1f; 通过CSS过渡轻松实现&＃xff1a;

.modal {/* ... */display : flex;top : 100vh ;transition : top 500ms ;
}.modal .show {top : 0 ;
}

现在&＃xff0c;无需使用display: none和top: 0初始化模态&＃xff0c;而是已经使用display: flex启动了模态&＃xff0c;而是使用top&＃xff1a; 100vh将其推到视口100vh 。 当模式设置为可见时&＃xff0c;它将平滑滚动到屏幕顶部。 让我们看看在Android上的结果&＃xff1a;

Android再次表现良好&＃xff01; 现在在iOS上&＃xff1a;

一旦可见&＃xff0c;iOS就会将模态爆炸到外层空间。 在模态动画制作过程中切换键盘似乎不是一个好主意。 您非常有信心&＃xff0c;只有在完成动画后才显示键盘才能解决该问题&＃xff1a;

function openModal () {modal.classList.add( &＃39;show&＃39; )// newsetTimeout( () &＃61;> {filterInput.focus()}, 500 )
}

很简单。 您需要等待500毫秒&＃xff08;与过渡持续时间相同&＃xff09;&＃xff0c;然后focus()输入进行focus()使键盘弹出。 您告诉自己&＃xff0c;以后将清理此事件&＃xff0c;也许使用事件或一些奇特的库&＃xff0c;而不是依赖JS和CSS之间的一致值。 但是你知道这不会发生。 结果&＃xff1a;

现在&＃xff0c;iOS似乎根本不关注输入。 当然&＃xff0c;不可能那么容易。 iOS仅允许焦点事件是用户交互的直接结果 &＃xff0c;而setTimeout并非如此。 解决方法是将“选择标题”按钮转换为文本输入&＃xff1a;

onfocus &＃61; "openModal()" readonly &＃61; true placeholder &＃61; "Select a title" >