小编ste*_*165的帖子

CSS 位置当缩放应用于父级、粘性滚动和元素的不同速度时粘性奇怪的行为

我不敢相信以前没有人注意到这一点，但我似乎找不到任何人注意到这种行为。首先我应该说这个 html 是很久以前写的（不是我写的），目前还不能真正修改。

所以问题是这样的：

我们的 html 结构布局如下

.rptDisplay {
  overflow: auto;
  position: relative;
  top: 0;
  left: 0;
  z-index: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 200px;
  max-height: 100vh;
  font-size: 11px;
  text-align: left;
}

.rptPositioner {
  width: 33%;
  display: block;
  transform-origin: 0px 0px;
  transform: scale(3, 3);
}

.rptHeader {
  position: sticky !important;
  top: 0 !important;
  z-index: 1;
  background: #eee;
}

body {
  margin: 0;
  padding: 0;
}

Run Code Online (Sandbox Code Playgroud)

<div class="rptDisplay">
  <div class="rptPositioner">
    <div class="rptHeader">Header</div>
    <div class="row">Row</div>
    <div class="row">Row</div>
    <div class="row">Row</div>
    <div …

Run Code Online (Sandbox Code Playgroud)

css positioning sticky

ste*_*165

2022 01-26

6
推荐指数

1
解决办法

4505
查看次数