如何仅滚动覆盖侧栏而不滚动整个页面

Question

在页面上，主要内容上有一个侧边栏覆盖。侧边栏和主要内容均应可滚动。但是，当侧栏滚动到底部时，主要内容继续滚动。当鼠标滚动侧栏时，如何防止主要内容滚动？换句话说，侧边栏和主要内容应独立滚动。

除了将侦听器添加到mouseover或scroll事件之外，还有什么方法仅使用CSS来解决问题？

页面的主要结构是这样的，还有一个演示我的问题的演示：https://codepen.io/anon/pen/LoZqzg

<div class="wrapper">
  <div class="content">
    ...
  </div>
  <div class="sidebar">
    ...
  </div>
</div>

Answer 1

由于使用的是Vue，因此可以使用vue-scroll-stop（https://www.npmjs.com/package/vue-scroll-stop）

npm i --save vue-scroll-stop

导入main.js：

import VueScrollStop from 'vue-scroll-stop'
Vue.use(VueScrollStop)

并在您的HTML标签上使用它：

<div v-scroll-stop></div>

固定的演示：https://jsfiddle.net/m3da7Lp0/2/

Answer 2

使用CSS 我在侧边栏中添加了内容类

<style>
 .sidebar .content {
      overflow-y: hidden;
      min-height: 500px;
 }
</style>

<div class="sidebar">
 <div class="content">

<p>facilisi morbi tempus iaculis urna</p>
<p>facilisi morbi tempus iaculis urna</p>
<p>facilisi morbi tempus iaculis urna</p>
<p>facilisi morbi tempus iaculis urna</p>
<p>facilisi morbi tempus iaculis urna</p>

</div>