Question

在这个Fiddle中，即使用户滚动容器，我也会尝试将栏保持在左下角。目前，如果我滚动容器，则栏会一直移动而不是始终粘在页脚上。

虽然这似乎是默认行为，但我并未意识到这一点。所以，任何解释都会非常有用。（我的期望是它会粘在容器的底部）。

需要考虑的事项：

当水平调整大小时，栏应该越过容器的水平滚动条。（目前正在发生）
栏应始终位于容器的底部。（没有发生）

＆＃13;

.parent {
  width: 60%;
  height: 300px;
  position: absolute;
  background-color: tomato;
  overflow: auto;
}
.content {
  height: 18000px;
  width: 300px;
  background-color: firebrick;
}
.bar {
  position: absolute;
  bottom: 0;
  left: 0;
  line-height: 20px;
  text-align: center;
  width: 50px;
  height: 20px;
  background-color: beige;
}

＆＃13;

<div class="parent">
  <div class="content"></div>
  <div class="bar">BAR</div>
</div>

＆＃13;

Answer 1

试试这个的 CSS

.grand-parent{ position: relative; } .parent { width: 60%; height: 300px; overflow: auto; background-color: tomato; } .content { height: 18000px; width: 300px; background-color: firebrick; } .bar { position: absolute; bottom: 0; left: 0; line-height: 20px; text-align: center; width: 50px; height: 20px; background-color: beige; }

<强> HTML

<div class="grand-parent"> <div class="parent"> <div class="content"></div> </div> <div class="bar">BAR</div> </div>

Answer 2

在给出answer之后编辑。我最终使用了javascript。

var stickToBottom = function (parent) {
    var bar = parent.querySelector('.bar');
    var top = bar.offsetTop;
    parent.addEventListener('scroll', function (e) {
        var el = e.currentTarget;
        bar.style.bottom = -el.scrollTop + "px";
        bar.style.left = el.scrollLeft + "px";
    });
}
var parent = document.querySelector('.parent');
stickToBottom(parent);

Working Fiddle

因为我需要考虑以下因素：

每个浏览器的滚动条厚度不同
容器内容的宽度因屏幕分辨率而异。
水平滚动容器时，栏应位于左下角。

将酒吧粘在容器的页脚上

2 个答案: