Question

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

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

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

Answer 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>

Answer 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作为我的盒子大小。要使用另一个盒子大小，你将不得不改变很多东西。

将滚动条放在视口的底部

2 个答案: