将滚动条放在视口底部答案

【问题标题】：Place the scrollbar at the bottom of viewport将滚动条放在视口底部
【发布时间】：2015-08-12 07:02:20
【问题描述】：

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

我设法做到了，但滚动条始终位于 div 的底部，我需要滚动条始终在视口底部可见。

是否可以使用 HTML/CSS 来实现？什么普通的 JS 或 jQuery 插件可以帮助解决这个问题？

JSFiddle Demo

【问题讨论】：

你不能用一张桌子来做这个吗？
您在寻找类似this 的东西吗？（快速和肮脏的样本！）
@GeorgeLee 你是什么意思？我想我使用表格也会遇到同样的问题
@Christoph 我使用了你的代码，它有点工作，但我的溢出属性分布使它有点复杂。我更新的实现不允许我从左侧面板滚动。 jsfiddle.net/jcano/1r1L7dtx/9

标签： javascript jquery html css

【解决方案1】：

您不能仅使用 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>

【讨论】：

今晚我将尝试这个解决方案。看起来不错，谢谢！

【解决方案2】：

我终于找到了一个对我的布局有帮助的解决方案。这是 Taras Romaniv 的回答和 Christoph 的评论以及this technique to hide the scrollbar 的混合体。

A working fiddle can be found here

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

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())
});

它已经完成了。现在可以让两个部分同时垂直滚动，但可以独立水平滚动。

警告：我使用border-box 作为我的box-sizing。要使用其他 box-sizing，您必须更改很多内容。

【讨论】：