是否有可能用“位置：粘性”来取代“溢出：隐藏”的父母？ [英] Is it possible to over-ride 'overflow: hidden' parents with 'position: sticky'?

问题描述

我有两列布局，我希望右边的列位于位置：粘性，以便在滚动较长的左列时保持可见。

I have a two column layout where I want the right column to be position: sticky so it stays in view while scrolling the longer left column.

这些是两个引导程序列，所以我要做的第一件事是删除浮点数（而是使用 display：inline-block ）。

These are two bootstrap columns, so the first thing I had to do was remove the floats (and instead am using display: inline-block).

此方法本身可以很好地工作，也可以在特定页面的DOM顶部附近，但是在呈现的位置（大约30左右） div深...不要问...）我无法使其正常工作。两列都继续滚动。

This works just fine on its own, or near the top of the DOM of this particular page, but in the rendered location (which, alas, is some 30 or so divs deep...don't ask...) I can't get it to work. Both columns just keep on scrolling.

我知道父元素是否具有溢出属性而不是可见可以打破位置：粘性，但这在这里似乎不是问题。是不是如果链中的 any 父元素具有溢出集，它可能会破坏粘性定位？

I know if the parent element has an overflow property other than visible that can break position: sticky but that doesn't seem to be the issue here. Is it that if any parent element up the chain has overflow set that it can break sticky positioning?

我只是确定在这种情况下要寻找什么，以确定在这种情况下破坏它的原因。关于粘性定位，还有其他需要注意的关键事项吗？

I'm just sure what to be looking for in this situation as to determine what is breaking it in this situation. Are there other key things to look out for when it comes to sticky positioning?

编辑：我改写了我的问题，因为它确实出现了（在进一步调查和测试之后），该问题是DOM顶部附近的父元素设置为 overflow-x：隐藏。由于这是共享代码，因此我必须找出原因以及它存在的原因。

I reworded my question as it does definitely appear (after further investigation and testing) that the issue is a parent element near the top of the DOM was set to overflow-x: hidden. As this is shared code I'll have to hunt down the reason for that and why it's there.

但是...在此期间，是否存在任何已知的解决方法这个...在哪里可以使用DOM树下方的元素作为放置为粘滞项的包含元素？

But...in the interim, is there any known workarounds to this...where one can use an element further down the DOM tree as the containing element for the item positioned sticky?

在下面的示例中，如果您消除了溢出来自。问题的页面按照我想要的方式运行（滚动页面时右列粘住）。

In the example below, if you remove the overflow from .theproblem the page behaves as I want (right column 'sticks' as you scroll through the page).

.theproblem {
  overflow-x: hidden;
}

.column {
  display: inline-block;
  width: 45%;
  vertical-align: top;
}

.column1 {
  border: 1px solid red;
  height: 1000px;
}

.column2 {
  border: 1px solid green;
  position: sticky;
  top: 1px;
}

<div class="theproblem">
  <div class="columnwrapper">
    <div class="column column1">
      This is column 1 (the tall one)
    </div>
    <div class="column column2">
      This is column 2 (the sticky one)
    </div>
  </div>
</div>

JSBin链接

推荐答案

您已经注意到粘性位置和滚动之间的任何溢出属性都会破坏它（在这里解释：位置：粘性为什么不起作用使用Core UI的Bootstrap CSS 和此处什么是滚动框？）。

As you already noticed any overflow property between the sticky position and the scroll will break it (explained here: Why is 'position: sticky' not working with Core UI's Bootstrap CSS and here What are `scrolling boxes`?).

您遇到的一种解决方法是将滚动条移动到另一个元素并隐藏默认元素：

One workaround in your case is to move the scroll to another element and hide the default one:

.theproblem {
  overflow-x: hidden;
}
/* Added this */
.columnwrapper {
  height:100vh;
  overflow:auto;
}
body {
  overflow:hidden;
  margin:0;
}
/**/

.column {
  display: inline-block;
  width: 45%;
  vertical-align: top;
}

.column1 {
  border: 1px solid red;
  height: 1000px;
}

.column2 {
  border: 1px solid green;
  position: sticky;
  top: 1px;
}

<div class="theproblem">
  <div class="columnwrapper">
    <div class="column column1">
      This is column 1 (the tall one)
    </div>
    <div class="column column2">
      This is column 2 (the sticky one)
    </div>
  </div>
</div>

这篇关于是否有可能用“位置：粘性”来取代“溢出：隐藏”的父母？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！