Question

我有一个固定位置的容器div，粘在顶部和顶部。屏幕下方。在那个容器中，我有一个可滚动的div：

.content-container {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.inner-scroll-pane {        
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

这适用于所有桌面浏览器（使用鼠标滚轮或触摸板）。但是，.inner-scroll-pane div在触摸屏（移动浏览器以及触摸笔记本电脑）上无法正确滚动。

平移内部div不会首先滚动 - 而是尝试平移整个页面，这只是过度反弹（因为它固定为屏幕大小并且没有任何可滚动的内容）。如果我首先点击.inner-scroll-pane div中的一个控件，将焦点置于其中，然后触摸平移工作完美，div就会滚动。

（此外，只有触摸屏上的Chrome或Safari才会出现此问题。触摸屏上的Firefox和IE工作正常。）

基于this post，我尝试将容器更改为位置：绝对但它没有任何区别。

如何在触摸屏上进行内部div滚动？

更新：在进一步调查中，似乎并不是位置：固定父母是具体问题（只是间接贡献）。出现此问题的原因是.inner-scroll-pane div具有约束高度，然后使用overflow：auto（overflow：scroll也有相同的问题）。我已经更新了标题......

那么，如何在具有约束高度和溢出的div上立即进行触摸平移？（没有先在div中点击/放置焦点）

具有约束高度和溢出的可滚动div：自动不会触摸滚动（仅限Chrome和仅限Safari）

0 个答案: