将栏粘贴到容器的页脚 [英] Stick the bar to footer of the container

问题描述

在这个 Fiddle 中，我试图将栏始终保持在左下角，即使用户滚动容器.目前，如果我滚动容器，栏会随之移动，而不是总是粘在页脚上.

虽然这似乎是默认行为，但我并不知道这一点.所以，任何解释都会非常有帮助.(我的期望是它会粘在容器的底部).

需要考虑的事项:

• 当水平调整大小时，滚动条应该越过容器的水平滚动条.(目前正在发生的事情)
• 条形图应始终位于容器底部.(没有发生)

.parent {宽度:60%；高度:300px；位置:绝对；背景色:番茄；溢出:自动；}.内容 {高度:18000px；宽度:300px；背景颜色:耐火砖；}.酒吧 {位置:绝对；底部:0；左:0；行高:20px；文本对齐:居中；宽度:50px；高度:20px；背景颜色:米色；}

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

解决方案

在给出这个 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');粘到底部(父母)；

工作小提琴

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

• 滚动条粗细因浏览器而异
• 容器内内容的宽度因屏幕分辨率而异.
• 水平滚动容器时，栏应仍位于左下角.

In this Fiddle, I am trying to keep the bar always to bottom-left even if the user scrolls the container. Currently, if I scroll the container, the bar moves along instead of being sticked to the footer always.

Though it seems to be the default behavior, I wasn't aware of this. So, any explanation would be really helpful. (My expectation was that it will be sticked to the bottom of the container).

Things to consider:

• The bar should come over the horizontal scroll bar of the container, when resized horizontally. (which is happening currently)
• The bar should be always at the bottom of the container. (not happening)

.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;
}

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

解决方案

Edited after giving this answer. I ended up using 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

Because I had following factors to consider:

• Scrollbar thickness vary in each browser
• Width of the content inside the container varies based on screen resolutions.
• When scrolling the container horizontally, the bar should be still at bottom-left.

这篇关于将栏粘贴到容器的页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！