Css 位置固定为水平滚动但垂直滚动

Posted 2023-02-24

【中文标题】Css 位置固定为水平滚动但垂直滚动

【英文标题】：Css position fixed for horizontal scroll but scroll vertically

【发布时间】：2012-12-25 20:08:17

【问题描述】：

我有三个div，如下：

<div id="left"></div>
<div id="center"><table></table></div>
<div id="right"></div>

现在我需要做的是保持#left 和#right 固定为水平滚动和滚动#center。这适用于#left 和#right 的css position:fixed。但问题是当我垂直滚动html页面时，我需要所有div's，即#left、#center和#right来滚动。这是行不通的。请任何人帮助我如何做到这一点，以便#left 和#right 与#center 一起垂直滚动，并保持固定水平滚动。我不知道如何使用 css 来完成它并使其工作。

【参考方案1】：

试试这个链接，它使用一个名为scrollspy 的插件来做这些事情。很简单...

http://www.rickyh.co.uk/css-position-x-and-position-y/

另外，请参阅这个 SO 问题：CSS: fixed position on x-axis but not y?

感谢semir.babajic：这是实际的sn-p。您将需要 jQuery。

$(window).scroll(function()
    $('#header').css(
        'left': $(this).scrollLeft() + 15 //Always 15px from left
    );
);

【讨论】：

css3里有没有叫position-x的东西？？？它至少可以在 IE8 中工作。我尝试在firebox的萤火虫中使用相同的方法，但失败了。