CSS如何修复一个元素与页面水平滚动但不垂直？

我已经创建了一个示例来帮助解释。 http://jsfiddle.net/9AUbj/1/CSS如何修复一个元素与页面水平滚动但不垂直？

<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>

我想“Hello World！”当用户水平滚动时与窗口水平移动。但我不要希望它垂直移动时，用户垂直滚动。做这个的最好方式是什么？我使用Bootstrap和jQuery UI，以防这些可能有所帮助。不过，我也对纯粹的CSS解决方案感兴趣。

在此先感谢:-) KTM

来源

2013-02-27 ktm5124

为什么页面水平滚动？ – Eevee 2013-02-27 00:25:24

没有我知道的CSS方式:)。 – kapa 2013-02-27 00:28:27

每当你滚动窗口，重新定位#one元素总是在屏幕上。另外，#one应该是位置：绝对。

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

这里是你拨弄着新的代码：http://jsfiddle.net/9AUbj/15/

来源

2013-02-27 00:27:05 MattDiamant

小提琴不适合我。 – kapa 2013-02-27 00:29:05

耶，奇怪的变化，让我再次发布。 – MattDiamant 2013-02-27 00:29:42

那里，应该工作。 – MattDiamant 2013-02-27 00:30:33

虽然我承认，只有CSS的解决方案将是很酷的基础上，轴不能应用的定位。由于固定位置的工作原理，即使固定位置元素向外延伸，也不能在文档上强制水平滚动。

然而，这是非常简单做与jQuery

$(document).on('scroll', function() { 
    $("#two").css('top', $(this).scrollTop()); 
});

这需要#two被绝对定位。

http://jsfiddle.net/9AUbj/16/

来源

2013-02-27 00:29:35

最初我以为没有CSS解决方案，但是我们的页面中有这个元素将我抛弃：http://jsfiddle.net/EP4dK/。这个元素完全符合我所描述的，没有任何我们自己的JavaScript应用于它。我想知道jQuery UI是否在这个元素上运行JavaScript？（即，使其与页面水平滚动但不垂直）。 – ktm5124 2013-02-27 00:39:01

@ ktm5124看来我们对术语“滚动”的含义有不同的理解 – 2013-02-27 00:40:56

根据我的评论？这只是为了显示丢弃我的元素的HTML - 没有演示滚动。基本上，我有一个有20列以上的表格，当你用表格水平滚动时，我想要一个菜单开销始终存在。但是，当您垂直滚动表格时，我不希望菜单无所不在。 – ktm5124 2013-02-27 00:44:51

CSS如何修复一个元素与页面水平滚动但不垂直？

回答

相关问题