javascript - 创建盒装/框架布局

Question

我想创建一个盒装布局，其中盒装/框架保持原位，内容在其中滚动。但是我不想使用老式的滚动框架方法，在该方法中您在该面板上有一个面板滚动条。

我想实现类似的东西> https://pixelgrade.com/demos/themes/?product=border - 为此，请忽略内容，但是您可以看到保留在原处的白色框架/边框 - 这就是我想要的。并且窗口有标准的滚动条，而不是框架本身。

我想我可能需要使用一些链接 sticky-kit.js 但是如果这是一个转移注意力的问题，我深表歉意。

任何人都可以指出我应该开始搜索的正确方向。在你问之前，我已经试着自己调查过了:)

Answer 1

我能想到的最简单的事情是沿边缘使用一些固定的 div 为您的框创建边框。

.container {
  border: 1px solid red;
  width: 100%;
}
.content {
  height: 1000px;
  background-color: lightblue;
  padding: 50px;
}
.top {
  background-color: white;
  height: 40px;
  position: fixed;
  width: 100%;
  top: 0;
}
.left {
  background-color: white;
  width: 40px;
  position: fixed;
  height: 100%;
  left: 0;
  top: 0;
  bottom: 0;
}
.right {
  background-color: white;
  width: 40px;
  position: fixed;
  height: 100%;
  right: 0;
  top: 0;
  bottom: 0;
}
.bottom {
  background-color: white;
  height: 40px;
  position: fixed;
  width: 100%;
  bottom: 0;
}

<section class="container">
  <section class="content">
    this is my content...
  </section>
  <div class="top"></div>
  <div class="left"></div>
  <div class="right"></div>
  <div class="bottom"></div>
</section>

这是允许边框透明的替代解决方案(以显示背景图像)。这是一个简单地隐藏内部 div 的滚动条的小 hack。我强烈建议，如果您选择使用此替代方案，请确保页面上显然有更多内容，因为不会有可见的滚动条。

body,
html {
  margin: 0;
  padding: 0;
}

.container {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/cc/ESC_large_ISS022_ISS022-E-11387-edit_01.JPG');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.wrapper {
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 40px;
  right: 40px;
  background-color: lightblue;
  overflow: hidden;
}

.wrapper2 {
  overflow-y: scroll;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-right: -20px;
  padding: 20px;
}

.content {
  height: 1000px;
}

<div class="container">
  <div class="wrapper">
    <div class="wrapper2">
      <div class="content">
        This is my content...
      </div>
    </div>
  </div>
</div>