时间戳

首页 > 解决方案 > 位置：水平滚动上的粘性不起作用

html - 位置：水平滚动上的粘性不起作用

问题描述

我有一个看起来像这样的表：

<table id="navbar"  border="1" style="background-color:navy;height:150px;position:sticky;top:0px;right:0px;left:0px;border-style: solid;border-color:black;max-width:999999px; width:100%; background-image: none;">

所有表格的样式：

table{
            text-align:center;
            width:30%;
            left:25%;

            /*font-size:larger;*/
        }

psoition sticky 应该使表格始终保持在屏幕顶部，即使在水平滚动时也是如此。但它不起作用。我发现它工作的唯一方法是在上面添加另一个表并同时提供 display:inline-table 属性，但这不是我正在寻找的解决方案。有谁知道它为什么不起作用的原因？

编辑-我需要使用位置：粘性。它适用于垂直滚动，但不适用于水平滚动。这就是我需要解决的问题

标签： htmlcsspositionstickyhorizontal-scrolling

解决方案

抱歉，有人回答你@Erel 花了这么长时间。

因此，如果您只想要代码，则不必阅读我的杂文，我将从演示开始：https ://codepen.io/NerdyDeeds/pen/oNYVLpB

对于您所追求的行为，这里有几件事需要注意：

  1. 就像整个height:100%事情一样，要让它工作，测量需要一直到:root. 也就是说，每个 DOM 节点层次结构都需要知道其边界框的实际限制（别担心，下面会更清楚）。

  2. 当一个对象被定位为粘性时，它基本上有两组坐标限制：视口的坐标限制，以及它的父对象的坐标限制。如果父元素很500px宽并且您1500px向右滚动屏幕，则粘性元素将停止在其父元素的边缘，而不是继续标记。这很好地为我们带来了最重要的方面：

  3. <body>标签只是另一个块级容器对象，只是它获得一个隐含的min-width:100vw; min-height:100vh. 也就是说，如果需要水平滚动的 IT 的孩子之一是250vw宽的，它将扩展以包含该元素，但它的尺寸width保持不变；它的孩子们仍然认为爸爸的唯一100vw宽。同样，如果你明确告诉它它的“实际”宽度实际上只有 100vw，它也会在滚动时滑出屏幕，带着它的粘性孩子（不是全部吗？）。

    同样的事情适用于粘性元素的所有祖先容器。他们不会自动获得min-width，因此您需要向他们解释他们将占用整个空间。如果您希望动态完成，则需要向 解释 <body>，以便他们可以继承100%页面的“真实”。如果任何祖先在其运动或尺寸方面受到限制，它将一路向下链到您的元素，无论是否粘稠。

我发现解决这个问题的最简单方法是简单地添加：

    body {
        width: max-content;
    }

...给你 CSS。这告诉身体“你实际上和你最宽的内容一样宽......传递它！” CSS 的“级联”部分将占据并将它们的测量值一直带到您的粘性元素，前提是它和主体本身之间的父节点都不受限制（就像您width:100vw在某处设置 a 一样。100%将工作很好，但又一次：只有当它的祖先没有一个更小时）。

查看随附的 CodePen。我尽量让它不言自明。

CodePen 的截图

再说一遍：对不起，没有人早点回复你。这是一种令人沮丧的感觉，很臭。我希望你已经找到了你的解决方案，但如果没有，这可能有助于谁来谷歌搜索。希望这有帮助。

推荐阅读