Question

我想建立一个浏览器窗口与网站内容之间存在差距/空间的网站。即使滚动内容，我也需要保持这种差距。

以下图片可以帮助您理解我的意思：

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

然而，上述解决方案只会在网站周围创建一个纯色的边框。

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

我创造了这个小提琴试图达到这个效果： https://jsfiddle.net/jascha/ozeoe2dp/57/

正如您在上面提到的小提琴中所看到的，内容周围存在间隙，通过该间隙可以看到身体的背景。即使滚动页面，这个差距也会保持不变。

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

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

我的解决方案的问题是滚动条没有到达视口的顶部和底部，因为间隙在滚动条之外。我找不到在可滚动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>

Answer 2

我现在明白你想要的东西......尝试一下......

.page-content{
    margin-top: -20px;
    position: relative;
    background: white;
}

body{
    margin: 0;
    background: url(https://im-01.gifer.com/ONMJ.gif);
    background-size: cover;
    padding: 100px;
}

#left {
    left: 0;
}

#right {
    right: 0;
}
#top {
    top: 0;
}
#bottom {
    bottom: 0;
}
#left, #right {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 15px;
}

#top, #bottom {
    position: fixed;
    left: 0;
    right: 0;
    height: 15px;
}

<!--<div class="body-border">
    <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>
</div>
-->

<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>

<强>无视我可能误解了这个问题，但如果您正在寻找滚动条到视口的全高，您可以将overflow-y: scroll;移动到身体边界div。

身体边框改变背景颜色或背景图像

2 个答案: