jquery - 使用主滚动条仅滚动一个 div 的内容

Question

我正在尝试，但我没有找到解决这个相当简单问题的方法。

基本上我想要的是有一个固定的主体，其中有一个垂直和水平居中的矩形 div 来托管我的内容。正文不会滚动，但 div 的内容应该滚动。

换句话说，我想要的基本上是在下层拥有一个完整的页面、整个背景(例如，全宽图像)，以及在该背景层之上托管我的内容的 div，独立滚动。

我的代码基本上是三个嵌套层:

1)主体(溢出:隐藏)，2)全宽透明容器(溢出-y:滚动)和3)居中的div，应该承载我的所有内容(position:absolute)。

问题是，没有任何内容滚动。如果我尝试将overflow-y:scroll或auto添加到居中的div，则其上会出现一个丑陋的滚动条，这不是我想要的 - 我想使用“主”主体滚动条进行滚动。

html, body {
    margin: 0;
    background-color: lightgray;
    overflow: hidden;
}

.container {
    overflow-y: scroll;
    width: 100%;
    height: 100vh;
    background-color: red;
} 

.overlay {
    position: absolute;
    width: 90%;
    height: 90vh;
    background-color: lightgrey;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-box-shadow: 0px 0px 60px -2px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 60px -2px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 60px -2px rgba(0, 0, 0, 0.75);
    z-index: 10;
}

<section class="container">
  <div class="overlay">
    <h1>Lorem Ipsum </h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vulputate 
    arcu sit amet quam malesuada, maximus ornare quam facilisis. Fusce eu lectus 
    sapien. Nunc condimentum, neque ut porta tincidunt, sem mi hendrerit nisi, 
    eget blandit elit diam nec
      enim. Vivamus imperdiet nisi auctor nisl auctor, at aliquam lectus luctus. 
    Mauris non sem tortor. Nulla facilisi. Duis pharetra commodo tempor. Fusce 
    luctus posuere fringilla. Morbi molestie tortor quis lectus sodales 
    vulputate. Aenean pharetra interdum tellus, nec congue nisi venenatis eu. 
    Cras eget metus et sapien aliquam dictum eget eu massa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vulputate 
    arcu sit amet quam malesuada, maximus ornare quam facilisis. Fusce eu lectus 
    sapien. Nunc condimentum, neque ut porta tincidunt, sem mi hendrerit nisi, 
    eget blandit elit diam nec
      enim. Vivamus imperdiet nisi auctor nisl auctor, at aliquam lectus luctus. 
    Mauris non sem tortor. Nulla facilisi. Duis pharetra commodo tempor. Fusce 
    luctus posuere fringilla. Morbi molestie tortor quis lectus sodales 
    vulputate. Aenean pharetra interdum tellus, nec congue nisi venenatis eu. 
    Cras eget metus et sapien aliquam dictum eget eu massa.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vulputate 
    arcu sit amet quam malesuada, maximus ornare quam facilisis. Fusce eu lectus 
    sapien. Nunc condimentum, neque ut porta tincidunt, sem mi hendrerit nisi, 
    eget blandit elit diam nec
      enim. Vivamus imperdiet nisi auctor nisl auctor, at aliquam lectus luctus. 
    Mauris non sem tortor. Nulla facilisi. Duis pharetra commodo tempor. Fusce 
    luctus posuere fringilla. Morbi molestie tortor quis lectus sodales 
    vulputate. Aenean pharetra interdum tellus, nec congue nisi venenatis eu. 
    Cras eget metus et sapien aliquam dictum eget eu massa.</p>
    </p>
  </div>
</section>

这是一个 fiddle ，您可以在其中看到我要做什么:

https://jsfiddle.net/ohmlg/29mL6tnv/

我想要什么:

1)当我滚动时，让div的内容保留在div内(现在，body上的overflow:hidden属性正在切断部分内容) 2)使用主滚动条滚动div内的内容

我无法实现像在右下角和左上有四个厚div(基本上在中间留下一个矩形“窗口”)这样的解决方法，因为我想要有两个背景:一个在底层(主体或.容器)和“内容 div”上的一个。

Answer 1

这不是直接可能的，但可以通过掩盖某些部分来使其看起来如此......

html {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 10vh 10vw;
}

body, .bg {
  background-color: #ddd;
  background-image: url('https://lorempixel.com/638/220/abstract/');
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

h1 {
  margin: 0 0 1rem;
}

p {
  margin: 1rem 0;
}
p:last-child {
  margin-bottom: 0;
}

#padding-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100vw;
  height: 10vh;
}

#padding-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 10vh;
}

#content-outline {
  position: fixed;
  top: 10vh;
  right: 10vw;
  bottom: 10vh;
  left: 10vw;
  border: 1px solid #000;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

#content {
  padding: 1rem;
  background-color: rgba(255, 255, 255, 0.5);
}

<div id="content">
  <h1>Lorem Ipsum</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales nunc eu est semper eleifend. Sed vulputate nulla sit amet hendrerit finibus. Donec dapibus turpis eget mauris ultricies lobortis. Curabitur in est a felis lacinia facilisis eu quis tortor. Quisque eget augue luctus, tristique ligula fermentum, efficitur sapien. Aenean ut nisi risus. Sed libero ligula, venenatis vel dictum nec, suscipit a nisl. Maecenas a lacus et urna commodo aliquam. Quisque gravida maximus ipsum nec interdum. Donec nec aliquet mauris. Phasellus laoreet sit amet erat at ornare. Donec rutrum nulla libero, eget sollicitudin ligula convallis dapibus. Donec sodales, lorem lacinia rutrum tempus, mi nunc ultricies justo, non dignissim turpis diam id urna. In suscipit gravida elit quis tristique. Vivamus quis sapien vestibulum, elementum mi in, sodales quam. Donec enim elit, lacinia vitae urna a, tincidunt sagittis nunc.</p>
  <p>Nullam pretium, libero non viverra suscipit, mauris elit egestas odio, eget commodo purus ipsum vel purus. Morbi eleifend libero mauris, feugiat bibendum ante pretium id. Morbi fringilla fringilla convallis. Nulla ullamcorper dui et quam pellentesque, ut finibus dolor sodales. Donec laoreet, augue ac ornare pretium, nulla est imperdiet elit, non euismod urna mi a risus. Proin id commodo neque. Aliquam scelerisque imperdiet elementum. Phasellus dignissim rhoncus nibh, sed efficitur massa aliquam id. Curabitur sit amet turpis dictum, pellentesque leo sed, congue urna. Morbi maximus volutpat neque, vitae molestie urna ornare a. Suspendisse ut tincidunt urna.</p>
  <p>Proin eget nisl at lacus placerat aliquam. Curabitur tempus consectetur nulla eu malesuada. Nulla at tortor quis erat ornare ultricies. Aenean dolor erat, tempor in risus vel, fringilla sollicitudin risus. Quisque porttitor metus eget ante ullamcorper faucibus. Curabitur placerat turpis ac aliquet rhoncus. Aenean fringilla fringilla urna, a consectetur tellus aliquet non. Sed dapibus, ex vitae lacinia sodales, ex nisl pulvinar nulla, et tempus nulla tortor at tellus. Vivamus ac consequat eros. Fusce ullamcorper leo sed malesuada tincidunt. Integer ullamcorper blandit eros in scelerisque.</p>
  <p>Nunc fermentum sapien orci, id feugiat lectus aliquet gravida. Sed imperdiet posuere nulla, sed aliquam est mollis at. Donec faucibus justo at velit tincidunt elementum. Quisque eget maximus nunc, eget pulvinar mi. Donec venenatis diam erat, non porttitor sem tempus ut. Donec dictum odio sed ornare pulvinar. Aliquam ac nulla velit. Ut nec magna ut nulla ornare imperdiet id ut ante. Aliquam placerat laoreet pharetra. Donec ante purus, maximus ac nisi ullamcorper, egestas vestibulum diam. In ultricies ante a nibh vestibulum, ut gravida nulla pulvinar.</p>
  <p>Suspendisse purus ex, tempus a accumsan ac, gravida eu quam. Proin venenatis est quis laoreet congue. Fusce nec efficitur dolor. Vestibulum eleifend felis non ultrices pretium. Mauris auctor eget risus non luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce varius non lacus non porttitor. Integer a turpis at lacus consequat sollicitudin. Vestibulum eget mi at enim imperdiet hendrerit ut ut nibh. Aliquam placerat sodales finibus. Nulla porttitor dolor sed nisi tincidunt vehicula a sit amet ligula. Aenean turpis ex, tempor sed urna et, tristique pretium velit. Mauris est risus, porta id dui a, tristique hendrerit odio. Sed ultricies consectetur gravida. Aenean vestibulum elit venenatis, condimentum sapien at, consectetur augue.</p>
</div>
<div id="padding-top" class="bg"></div>
<div id="padding-bottom" class="bg"></div>
<div id="content-outline"></div>