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

【问题标题】：How to scroll an overlay sidebar only without scrolling the whole page如何仅滚动覆盖侧边栏而不滚动整个页面
【发布时间】：2019-09-30 00:06:54
【问题描述】：

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

除了为鼠标悬停或滚动事件添加监听器外，有没有只使用 CSS 来解决问题的方法？

页面的主要结构是这样的，一个demo来说明我的问题：https://codepen.io/anon/pen/LoZqzg

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

【问题讨论】：

标签： css vue.js scroll

【解决方案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/

【讨论】：

【解决方案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>

【讨论】：

在您的回答中，主要内容的高度太大，以至于它不会随时滚动。你会尝试降低窗户的高度吗？我试过你的方法，但问题仍然存在。