将滚动条放在视窗底部

Question

我正在研究一个相当复杂的布局。有两个区域（红色和蓝色）必须同时垂直滚动，但右侧区域（蓝色）必须能够独立于其他区域水平滚动。

我设法做到了这一点，但是滚动条总是在div的底部，我需要滚动条总是在视口的底部可见。

用HTML/CSS可以做到这一点吗？什么简单的JS或jQuery插件可以帮助实现这一点？

小工具演示

Answer 1

我终于找到了一个有助于布局的解决方案。它混合了塔拉斯·罗曼尼夫的回答和克里斯托夫的评论，以及隐藏滚动条的技巧。

这里可以找到一把有效的小提琴

为了动态隐藏滚动条，计算滚动条的宽度，我使用这个

var blockset = document.querySelector('.blockset');
var vScrollWidth = blockset.offsetWidth - blockset.clientWidth
var panelWidth = $(blockset).outerWidth()

$(blockset).css("width", keysWidth + vScrollWidth)

Blockset在Panel中，在这段代码之后，它比它的容器宽了一个滚动条的宽度，所以滚动条现在看不到了。

接下来，当内容区域的底部滚动条增加垂直滚动条的长度时，我们也必须对此进行补偿。

var content = document.querySelector('.content');
var hScrollHeight = content.offsetHeight - content.clientHeight;

$(blockset).css("padding-bottom", hScrollHeight)

我们正在将Content的水平滚动条的高度作为填充添加到Blockset。现在当我们垂直滚动时，两边将具有相同的高度。

最后，我们同步条形图，因此在一个部分垂直滚动将垂直滚动另一个部分。

$(content).scroll(function () {
    $(blockset).scrollTop($(content).scrollTop())
});

$(blockset).scroll(function () {
    $(content).scrollTop($(blockset).scrollTop())
});

一切都结束了。让两个部分同时垂直滚动，但独立水平滚动现在是可能的。

警告一句：我正在使用边框框作为我的框大小。要使用另一种盒子尺寸，你必须改变很多事情。

Answer 2

您不能仅使用 CSS 实现它。但是，您可以使用 JavaScript 分离面板并同步它们：

var panel = document.querySelector('.panel');
var content = document.querySelector('.content');
var offset = panel.offsetWidth - panel.clientWidth;

content.style['left'] = -offset + 'px';
content.style['width'] = (content.offsetWidth + offset) + 'px';
content.style['float'] = 'left';
content.style['margin-right'] = -offset + 'px';

content.addEventListener('scroll', function(event) {
  panel.scrollTop = event.target.scrollTop;
});

panel.addEventListener('scroll', function(event) {
  content.scrollTop = event.target.scrollTop;
});

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}
html {
  min-height: 100%;
}
body {
  overflow: hidden;
}
.container {
  height: 200px;
  width: 400px;
  overflow: hidden;
  position: relative;
}
.panel {
  float: left;
  background: red;
  overflow: scroll;
  height: 100%;
}
.content {
  position: relative;
  background: blue;
  overflow: scroll;
  height: 100%;
}
.block {
  width: 80px;
  height: 80px;
  margin: 10px;
  background: gray;
}
.info {
  width: 1500px;
  height: 80px;
  margin: 10px;
  background: white;
}

<div class="container">
  <div class="panel">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="content">
    <div class="info"></div>
    <div class="info"></div>
    <div class="info"></div>
    <div class="info"></div>
    <div class="info"></div>
  </div>
</div>