代码之家 › 专栏 › 技术社区 › WangYudong

如何只滚动覆盖边栏而不滚动整个页面

scroll vue.js css

WangYudong · 技术社区 · 6 年前

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

除了将侦听器添加到mouseover或scroll事件之外,是否有任何方法仅使用CSS来解决问题?

页面的主要结构如下所示,并演示了我的问题: https://codepen.io/anon/pen/LoZqzg

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

0 回复 | 直到 6 年前

WangYudong 6 年前

因为您使用的是Vue,所以可以使用Vue scroll stop( https://www.npmjs.com/package/vue-scroll-stop )

npm i --save vue-scroll-stop

导入主要.js:

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

并在HTML标记上使用它:

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

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

channasmcs 6 年前

使用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>

推荐文章

StuP · 响应式Vue组件在数据更改时不更新

2 年前

dbzx10299 · 对从Api端点返回的数据使用Vue转换组

2 年前

mrDandaleonx · Vue3获取div内容并将其发布到表单

2 年前

ateymour · Vue3在异步调用后将道具传递给子组件

2 年前

Artur Müller Romanov · 是否可以有条件地渲染布局?

2 年前

Ilijanovic · 对象可能未定义

2 年前

devAR · 单击其他组件时,单选按钮未保持选中状态

2 年前

Coderama · 在v-for指令中使用:key属性时,TS应出现类型错误

2 年前

Suffii · Vue表单输入绑定的条件绑定存在问题

2 年前

akkonrad · 函数的作用是:返回数据属性为空的实例

3 年前