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

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; 为固定 header 并为要垂直滚动的框设置 overflow: auto（或 scroll）。

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

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

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

Answer 2

使用position:fixed时，你实际上需要JavaScript；但仅实现水平滚动部分。我更新了 fiddle 所以它也提供了水平滚动。

我所做的是将带有 position:fixed 的 verticalFixedBox 保留在原位，但添加另一个具有相同内容但不透明度为 0.01 和 position:absolute 的 div；保留水平滚动条。

点赞：http://jsfiddle.net/8jzhtg9w/7/

HTML:

<div id='verticallyFixedBox'>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed ipsum nec sapien fermentum luctus. Fusce varius arcu ut nibh efficitur, quis euismod elit lobortis. Cras at fringilla lectus. Proin ac vulputate metus. Fusce eu mattis urna, at cursus elit. Aliquam erat volutpat. Ut tincidunt et lacus in faucibus. Donec et mi venenatis, condimentum urna vel, ultrices ante.
</div> 
<div class='scroller'> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed ipsum nec sapien fermentum luctus. Fusce varius arcu ut nibh efficitur, quis euismod elit lobortis. Cras at fringilla lectus. Proin ac vulputate metus. Fusce eu mattis urna, at cursus elit. Aliquam erat volutpat. Ut tincidunt et lacus in faucibus. Donec et mi venenatis, condimentum urna vel, ultrices ante.
</div>
<div id='padder'></div>

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed ipsum nec sapien fermentum luctus. Fusce varius arcu ut nibh efficitur, quis euismod elit lobortis. Cras at fringilla lectus. Proin ac vulputate metus. Fusce eu mattis urna, at cursus elit. Aliquam erat volutpat. Ut tincidunt et lacus in faucibus. Donec et mi venenatis, condimentum urna vel, ultrices ante.
</p>

<p>
Nunc non turpis non orci consectetur bibendum eget vitae urna. Nulla dictum, orci sit amet luctus consectetur, nisi nisl rutrum sapien, ut fermentum urna dui a ipsum. Mauris commodo convallis mi, sed ullamcorper enim mollis eget. Maecenas risus felis, lobortis eu interdum elementum, facilisis a justo. Ut semper velit at enim convallis mollis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis a orci magna. Duis blandit orci ac fermentum auctor. In hac habitasse platea dictumst. Aliquam sit amet molestie felis, et congue purus. Proin porta mauris sed tincidunt ultrices. Curabitur tristique felis ac sodales aliquet.
</p>

<p>
Etiam placerat lorem non sem feugiat, non tristique neque maximus. Maecenas ultrices scelerisque ante, ut bibendum nunc tincidunt maximus. Proin placerat tincidunt quam in scelerisque. Sed nunc tortor, ultricies ut tincidunt eu, molestie id nunc. Nam nisl mauris, scelerisque at pharetra vitae, lacinia vitae sapien. Etiam sollicitudin eget magna ornare eleifend. Praesent molestie quam a mollis accumsan.
</p>

<p>
Nullam gravida, est ac gravida vulputate, nibh quam bibendum nisl, et posuere eros enim ac ante. Nullam eu tortor vel dui aliquam mattis non a mi. Sed porttitor sem id purus efficitur, at maximus nisi placerat. Integer imperdiet quam a risus varius, feugiat commodo diam dictum. Donec ac viverra risus. Duis rhoncus mi sit amet augue malesuada, et tincidunt magna aliquet. Phasellus fermentum lorem vel ullamcorper commodo. Proin laoreet feugiat ullamcorper. Mauris auctor leo eu imperdiet consectetur. Donec et diam vel ligula elementum consequat. Pellentesque nisl urna, sagittis iaculis venenatis non, varius non nibh.
</p>

<p>
Mauris fermentum eros quis metus tempor venenatis. Suspendisse est nisl, finibus sit amet malesuada vel, pharetra eget neque. Curabitur malesuada non nibh eu pellentesque. Aenean ultrices ante sed lorem rhoncus, ac volutpat urna condimentum. Mauris tincidunt mauris et pretium pellentesque. Sed viverra arcu at risus tempor, sed mattis ex maximus. Proin euismod feugiat tortor sit amet semper. Duis ornare finibus nunc at commodo. Suspendisse dignissim metus quis facilisis vulputate. Nunc eu ultricies leo. Morbi cursus id justo eget tempus. In hac habitasse platea dictumst. In tempor, libero sed ullamcorper aliquam, elit libero mattis magna, sit amet tincidunt mi tellus eu purus. Aenean sed velit nunc. Nunc quis lobortis enim, non sodales neque.
</p>

CSS:

#verticallyFixedBox {
    background: #ccc;
    border-bottom: 2px solid #000;
    left: 0;
    padding: 10px;
    position: fixed;
    top: 0;
    white-space: nowrap;
}
.scroller {
    opacity:0.01;
    position:absolute;
    white-space: nowrap;
    padding: 10px;
    top:0px;
    left:0px;
}
#padder {
    height: 30px;
}

JavaScript:

$(window).scroll(function() {
$('#verticallyFixedBox').css({
        'left': -1 * $(this).scrollLeft()
    });
});

唯一的问题：opera-mini 似乎还不支持 position:fixed 特性： http://caniuse.com/#feat=css-fixed

Answer 3

您可以在纯 CSS 中完成。

#verticallyFixedBox {
  position: sticky;
  top: 0;
}

body {
  margin: 0;
}
#verticallyFixedBox {
  position: sticky;
  top: 0;
  background: #ccc;
  border-bottom: 2px solid #000;
  padding: 10px;
  white-space: nowrap;
}

<div id='verticallyFixedBox'>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed ipsum nec sapien fermentum luctus. Fusce varius arcu ut nibh efficitur, quis euismod elit lobortis. Cras at fringilla lectus. Proin ac vulputate metus. Fusce eu mattis urna, at cursus elit. Aliquam erat volutpat. Ut tincidunt et lacus in faucibus. Donec et mi venenatis, condimentum urna vel, ultrices ante.
</div>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed ipsum nec sapien fermentum luctus. Fusce varius arcu ut nibh efficitur, quis euismod elit lobortis. Cras at fringilla lectus. Proin ac vulputate metus. Fusce eu mattis urna, at cursus elit. Aliquam erat volutpat. Ut tincidunt et lacus in faucibus. Donec et mi venenatis, condimentum urna vel, ultrices ante.
</p>
<p>
  Nunc non turpis non orci consectetur bibendum eget vitae urna. Nulla dictum, orci sit amet luctus consectetur, nisi nisl rutrum sapien, ut fermentum urna dui a ipsum. Mauris commodo convallis mi, sed ullamcorper enim mollis eget. Maecenas risus felis, lobortis eu interdum elementum, facilisis a justo. Ut semper velit at enim convallis mollis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis a orci magna. Duis blandit orci ac fermentum auctor. In hac habitasse platea dictumst. Aliquam sit amet molestie felis, et congue purus. Proin porta mauris sed tincidunt ultrices. Curabitur tristique felis ac sodales aliquet.
</p>
<p>
  Etiam placerat lorem non sem feugiat, non tristique neque maximus. Maecenas ultrices scelerisque ante, ut bibendum nunc tincidunt maximus. Proin placerat tincidunt quam in scelerisque. Sed nunc tortor, ultricies ut tincidunt eu, molestie id nunc. Nam nisl mauris, scelerisque at pharetra vitae, lacinia vitae sapien. Etiam sollicitudin eget magna ornare eleifend. Praesent molestie quam a mollis accumsan.
</p>
<p>
  Nullam gravida, est ac gravida vulputate, nibh quam bibendum nisl, et posuere eros enim ac ante. Nullam eu tortor vel dui aliquam mattis non a mi. Sed porttitor sem id purus efficitur, at maximus nisi placerat. Integer imperdiet quam a risus varius, feugiat commodo diam dictum. Donec ac viverra risus. Duis rhoncus mi sit amet augue malesuada, et tincidunt magna aliquet. Phasellus fermentum lorem vel ullamcorper commodo. Proin laoreet feugiat ullamcorper. Mauris auctor leo eu imperdiet consectetur. Donec et diam vel ligula elementum consequat. Pellentesque nisl urna, sagittis iaculis venenatis non, varius non nibh.
</p>
<p>
  Mauris fermentum eros quis metus tempor venenatis. Suspendisse est nisl, finibus sit amet malesuada vel, pharetra eget neque. Curabitur malesuada non nibh eu pellentesque. Aenean ultrices ante sed lorem rhoncus, ac volutpat urna condimentum. Mauris tincidunt mauris et pretium pellentesque. Sed viverra arcu at risus tempor, sed mattis ex maximus. Proin euismod feugiat tortor sit amet semper. Duis ornare finibus nunc at commodo. Suspendisse dignissim metus quis facilisis vulputate. Nunc eu ultricies leo. Morbi cursus id justo eget tempus. In hac habitasse platea dictumst. In tempor, libero sed ullamcorper aliquam, elit libero mattis magna, sit amet tincidunt mi tellus eu purus. Aenean sed velit nunc. Nunc quis lobortis enim, non sodales neque.
</p>

请注意，并非所有浏览器都支持 sticky positioning。

Answer 4

避免使用 JavaScript 来解决布局问题。如果我理解您在寻找什么，您希望最顶层的元素 verticallyFixedBox 保留在一个位置，并且您希望其内容无论屏幕大小如何都可以滚动。

将 verticallyFixedBox 的内容放入单独的 div 元素中。然后将该子 div 设置为可滚动元素。您必须确保将 verticallyFixedBox 的顶部、左侧和右侧也固定到浏览器 window 的顶部、左侧和右侧。

#verticallyFixedBox
    background: #ccc;
    border-bottom: 2px solid #000;
    padding: 10px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

#scroll {
    position: relative;
    overflow: scroll;
    white-space: nowrap;
}

<div id='verticallyFixedBox'>
    <div id='scroll'>
    Lorem ipsum dolor...rest of text. 
    </div>
</div>

通过修复外部 div 并在其中滚动，您应该在大多数设备上获得相当一致的显示。在您的 JSFiddle 上更新了它，希望这就是您要找的。

这是一个额外的页面，其中包含我服务器上未链接文件夹中的代码：Test Page。看起来它适用于我的 phone.

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

How do I vertically fix an element in a mobile browser but still allow for horizontal scroll?

javascript

mobile