javascript - 具有不断变化的背景颜色或背景图像的 body 边框

Question

我想建立一个在浏览器窗口和网站内容之间有间隙/空间的网站。即使在滚动内容时，我也需要这个间隙保持不变。

下图应该可以帮助您理解我的意思:

已经解释了类似的效果here可以看到演示here .

然而，上述解决方案仅在具有纯色的网站周围创建边框。

问题是我想创建一个实际的间隙而不是实心边框，它是透明的，以便通过它可以看到网站的主体。

我创建了这个 fiddle 试图达到这样的效果: https://jsfiddle.net/jascha/ozeoe2dp/57/

正如您在上面链接的 fiddle 中看到的那样，内容周围有一个间隙，通过该间隙可以看到正文的背景。即使在滚动页面时，这个间隙仍然存在。

我通过将内容嵌套在几个 div 中实现了这一点。第一个用于间隙，第二个用于滚动条，第三个 div 用于实际网站内容，如下所示:

<div class="body-border">
    <div class="scrollable-content">
        <div class="page-content">
            website content goes here
        </div>
    </div>
</div>

我的解决方案的问题是滚动条没有到达视口(viewport)的顶部和底部，因为间隙在滚动条之外。我找不到在可滚动 div 内部留出间隙的方法。

所以我的问题是:我怎样才能使间隙始终出现在内容的所有边上，即使在滚动页面时也是如此，同时在该间隙之外有一个正常的滚动条？

我的猜测是 jQuery 能够实现这一点，但我真的不知道怎么做。

我希望我能解释清楚，因为英语不是我的母语。 提前致谢!

Answer 1

尝试使用 border-image 而不是 background-image ...在 html 中也有一点变化，为边框使用单独的 div ...

此外，您还需要将 pointer-events:none 应用于该边框，以便您可以选择内部内容

* {
  box-sizing: border-box
}

body {
  margin: 0;
}

.body-border {
  pointer-events: none;
  background-size: cover;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 999;
  border: 20px solid;
  border-image: url(https://im-01.gifer.com/ONMJ.gif) 20;
}

.scrollable-content {
  padding: 20px;
}

.page-content {
  position: relative;
  background: white;
}

<div class="body-border"></div>
<div class="scrollable-content">
  <div class="page-content">
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
  </div>
</div>