2

我在已翻译的垂直滚动 div 中输入文本时遇到问题。

在 webkit 浏览器中，查看这个简化的示例：

http://jsfiddle.net/ZbguJ/3/

滚动到 div 的底部，单击文本框，然后按键盘按钮。div 向上滚动到顶部，并且不显示焦点输入。预期的行为是 div 不应该滚动，并且用户可以继续不受阻碍地输入文本。

就好像浏览器正在确定 div 应该滚动到哪里而不考虑翻译。

任何可能的解决方法？

在实际应用中，有问题的元素使用 translate 来在屏幕上设置动画。用 'top' 属性上的 CSS 动画替换 translate 会严重影响动画的平滑度，但可以解决滚动问题。

4

2 回答 2

0

简单的答案：不要使用translate. 使用margin-topandmargin-left代替。我可以通过取消转换并添加来让你的小提琴工作

margin-top: -200px;
于 2012-10-03T01:57:10.203 回答
0

今天早上洗澡的时候想了想，找到了解决方法。

将滚动内容包裹在父 div 中，正常平移父 div，平移滚动 div 与父 div 相等且相反，并将 top 或 margin-top 设置为父平移量以正确对齐内部 div。请参阅此小提琴中的更新示例：http: //jsfiddle.net/ZbguJ/5/

#Parent {
    -webkit-transform: translate(0, -200px); /* animated */
}
#Child { 
    -webkit-transform:  translate(0, 200px);
    top: -200px;
    position:relative;
}

愚蠢，但它完成了工作。

于 2012-10-03T20:10:46.453 回答