javascript - 固定元素的 translate x 在移动设备上缩放时不同步

标签 javascript html css

我有一个固定的标题。我将其设置为 position: fixed,但它可以沿 x 轴滚动。这是我用于 x 滚动的 javascript:

var thead = document.querySelector("#acctInqFormResults table tr:first-child");
window.onscroll = function() {
    thead.style["-webkit-transform"] = "translateX(" + -window.scrollX + "px)";
    thead.style.transform = "translateX(" + -window.scrollX + "px)";
};

在我在移动设备上对其进行测试之前,它一直运行良好。当我捏放大表格时,固定标题似乎以与以全尺寸加载文档时相同的速度滚动,从而使标题和表格内容不同步。有什么方法可以补偿移动缩放吗?

最佳答案

我相信添加此视口(viewport)元标记应该有助于移动浏览器正确计算位置。毕竟 - 如果您正在制作特定于移动设备的网站版本,缩放是无用的,甚至可以完全避免以获得最佳用户体验。

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />

关于javascript - 固定元素的 translate x 在移动设备上缩放时不同步,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31926439/

相关文章:

javascript - React - 如何手动触发子组件的鼠标输入

javascript - 脚本中 undefined variable 错误

php - 如何使用 JavaScript 填充 HTML 选择列表

html - 为什么右边有很大的边距?

java - 如何将 txt 文件中的数据提取到 HTML 表 Java/JSP

html - 如何使用 bootstrap 在一行中对齐 anchor 标记?

css - 如何拥有完美的响应式CSS圈子?

javascript - 匿名 JavaScript 函数的括号

javascript - 我的代码在 jsfiddle 上运行,但为什么不能在本地计算机上运行?

javascript - Vuex:功能范围模块中的未知 setter/getter