CSS如何修复一个元素以与页面一起水平滚动而不是垂直滚动? [英] CSS how to fix an element to scroll horizontally with the page but not vertically?

问题描述

我创建了一个示例来帮助解释. http://jsfiddle.net/9AUbj/1/

I have created an example to help explain. http://jsfiddle.net/9AUbj/1/

<style>
div#one {}
div#two {
    height: 50px;
    background-color: blue;
    width: 1000px;
}
div#three {
    height: 1000px;
}
</style>
...
<div id="one">Hello World!</div>
<div id="two"></div>
<div id="three"></div>

我想要世界你好！"当用户水平滚动时，可随窗口水平移动.但是我不要，当用户垂直滚动时，我希望它随窗口垂直移动.做这个的最好方式是什么?我正在使用Bootstrap和jQuery UI，以防万一.但是，我也对纯CSS解决方案感兴趣.

I would like "Hello World!" to move horizontally with the window when the user scrolls horizontally. But I DON'T want it to move vertically with the window when the user scrolls vertically. What is the best way to do this? I'm using Bootstrap and jQuery UI, in case those might help. However, I am also interested in a pure CSS solution.

预先感谢:-)ktm

Thanks in advance :-) ktm

推荐答案

每当滚动窗口时，请将#one元素重新定位为始终显示在屏幕上.此外，#one应该位于位置:绝对.

Whenever you scroll the window, reposition the #one element to always be on screen. Also, #one should be position: absolute.

$(window).scroll(function () {
    $("#one").css({
        left: $(this).scrollLeft()
    });
});

在这里摆弄新代码: http://jsfiddle.net/9AUbj/15/

这篇关于CSS如何修复一个元素以与页面一起水平滚动而不是垂直滚动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！