固定了与页面其余部分水平滚动的顶部栏

Fixed top bar that scrolls horizontally with the rest of the page

本文关键字：水平 滚动 顶部 余部      更新时间：2023-09-26

我想实现一个固定的顶部栏，但同时它需要与页面的其余部分水平滚动；它不是一个反应灵敏的站点

单独使用CSS时，position:fixed将不会与页面的其余部分一起滚动。因此有两种方法

1( 不要使用固定位置，而是将容器留在文档流中，而是使用javascript将其垂直放置在窗口顶部。问题是脚本在浏览器上的速度不够快，每次垂直滚动时，就在顶部栏移动覆盖之前，内容会短暂闪烁。

2( 保持位置固定，并使用javascript根据用户的左/右滚动量水平定位。问题是手机有一个滚动动画(一种加速动画(，脚本只在动画停止后运行，这也很尴尬。

这是我看到的两种实现方式，我希望如果你们有其他选择，在小屏幕台式机和手机上也能很好地工作。对不起，没有代码可以强调，因为它会占用太多空间。

简短回答：没有。

长话短说：使用"固定"定位的问题在于，它会使元素脱离流动。因此，它不能相对于其父对象重新定位，因为它就好像没有父对象一样。

你需要使用JS。我认为你提供的解决方案是唯一的。

如果我理解正确，看起来你想要这样的东西，垂直滚动条在最右边，但你没有说什么。

<!DOCTYPE html>
<html>
    <head>
        <title>scroll</title>
        <style type="text/css">
            #topbar
            {
                position: absolute;
                width: 2000px;
                height: 40px;
                top: 0;
                left: 0;
                border: 1px dashed red;
            }
            #content
            {
                position: absolute;
                width: 2000px;
                left: 0;
                top: 41px;
                bottom: 0;
                border: 1px dotted blue;
                overflow-y: scroll;
            }
        </style>
    </head>
    <body>
        <div id="topbar">
            Hello topbar
        </div>
        <div id="content">
            <script type="text/javascript">
                (function(){
                    var n = 1000;
                    do
                    {
                        document.write("<p>some content</p>");
                    } while ( --n );
                })();
            </script>
        </div>
    </body>
</html>
相关文章：