javascript - 如何在移动浏览器中垂直固定元素但仍允许水平滚动？

Question

在桌面浏览器上，我可以使用以下 javascript 垂直固定元素，但仍允许水平滚动。如您所见，它会在每个滚动事件上重新定位元素。要明白我的意思，请尝试在此 JSFiddle 中水平和垂直滚动.

var verticallyFixedBox = document.getElementById('verticallyFixedBox');

window.addEventListener('scroll', function() {
    verticallyFixedBox.style.top = '' + document.body.scrollTop + 'px';
});

但是，此逻辑不适用于移动浏览器，因为移动浏览器显然要等到整个拖动完成后才会进行绘制，从而导致体验不稳定。

垂直固定元素但仍允许移动浏览器水平滚动的好方法是什么？

Answer 1

如果您使用设置为 height: 100% 的容器盒并将 html 和 body 元素的高度设置为 100 %，那么就可以使用 position: absolute; top: 0; 用于固定标题，并为要垂直滚动的框设置 overflow: auto(或 scroll)。

请记住将您的 body 和 html 边距设置为 0 以避免浏览器默认样式。

我已经更新了你的 fiddle :http://jsfiddle.net/jb489ddL/1/

此解决方案根本不使用 javascript，因此它可以在移动浏览器上运行，因为您不依赖于滚动事件。