左边侧边栏导航和右边内容的滚动互不影响

已于 2024-01-23 15:07:03 修改
阅读量3.1k 收藏 1
点赞数 5
分类专栏： vue 文章标签： html css3
于 2019-12-14 01:10:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45618535/article/details/103535093
版权

左边侧边栏导航和右边内容的滚动互不影响

在做vue的一个项目的时候出现一个问题发现无论如何都无法让左侧导航滚动的情况下，右侧内容不滚动，或者是右侧内容滚动的情况下左侧内容不滚动

话不多说，直接上代码。
在这里插入图片描述
最后是这么解决的：在这里插入图片描述

伊昂呀
关注
  • 5
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
怎样使左侧菜单栏不随滚动条滚动
yulongkuke的博客
07-27 4824
怎样使左侧菜单栏不随滚动条滚动
固定顶部导航栏和左侧边栏滚动条为右下方的一类布局分析
Oshyn —— 乐而学，学而乐
08-16 9720
在管理界面或者一些需要固定显示信息的界面，经常遇到这样的布局：顶部导航栏固定不动，左侧有一个侧边栏用来显示详细信息，右下侧为主要内容所在区域。如下图所示： 这是需要达到的目标效果。其中Header和SideNav部分之间用固定定位实现就可以了，但是MainContent部分右侧的scroll bar确实不太好处理，主要存在两个问题： - 按照普通的方式基本都会铺满右侧整个可视区域，这使得顶部
使用vue3实现右侧瀑布流滑动时左侧菜单的固定与取消固定
最新发布
weixin_43312391的博客
05-25 307
使用vue3实现右侧瀑布流滑动时左侧菜单的固定与取消固定
CSS布局设置如何才能做到左边滑动右边不动，右边滑动左边不动
CSDN for recording problems
06-22 6768
最近有个小东西，分类筛选左侧超出了固定高度，想要他两边滚动但是不影响又右边的内容区域 注意这里是微信小程序的，但是大同小异 先看来看看效果 其实实现方式很简单两个属性搞定的事 当然我这里在左侧的最外层盒子中使用position: fixed; + overflow: auto; + float: left;搞定了。 .side-tab{ position: fixed; height: 100%; overflow: auto; float: left; } 如果想去去掉左侧滚动条可以设.
css设置头部左侧固定，右侧内容滚动
qq_53353413的博客
11-08 2234
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>flex</title.
左右布局 自适应滚动
Gx754649的博客
06-29 235
在页面布局时 产生的问题是当左边需要上下滚动时 不知道如何是好。
Vue ElementUi导航组件结合后台管理实现左侧菜单滚动不显示滚动条
龘
01-30 1439
1、代码例 <el-aside :width="Iconflag ? '200px' : '0px'"> <el-row style="width: 100%"> <el-col> <div class="Text">后台管理系统</div> //导航外新包一个盒子，除了Text类盒子不滚动外，其余导航滚动，并不显示滚动条 <div class="Nav
滚动页面侧边栏顶部固定和底部固定方法
03-14
滚动页面侧边栏顶部固定和底部固定方法
Bootstrap响应式侧边栏导航菜单代码
06-05
Bootstrap响应式侧边栏导航菜单是现代网页设计中不可或缺的一部分，尤其在移动优先的设计策略下。Bootstrap框架以其灵活性和易用性，成为了构建此类菜单的首选工具。本资源提供的代码正是利用Bootstrap，jQuery以及...
C# winform侧边栏 左侧导航栏 导航控件
04-25
参考网站导航UI设计的winform侧边导航栏，内有vs2017的demo,支持2.0框架。总体扁平化设计，图标、大小位置、文字颜色、样式等可灵活控制,详细请看代码。 注：项的呈现非树形结构，能力有限，有些问题无法解决，但不...
vue实现侧边栏导航效果
10-16
在本文中，我们将深入探讨如何使用Vue.js框架实现一个功能完善的侧边栏导航系统，其中包含动态加载的内容。Vue Router是Vue.js官方的路由管理器，它将页面路由与Vue组件关联起来，使得我们可以轻松地构建单页应用...
9套精美侧边栏导航菜单
11-01
在这个压缩包中，包含的“9套精美侧边栏导航菜单”是一个集合，提供了多种不同设计风格和功能的侧边栏模板，非常适合前端开发者、设计师以及对网页布局感兴趣的个人进行学习和使用。 首先，侧边栏导航菜单的设计...
左右菜单联动：轻松实现网页导航的高效与便捷！
CRMEB小程序商城的博客
12-18 1475
去获取当前的所有节点集合，再配合 scroll-view 的 scroll-top 属性，使其在点击左侧菜单栏的时候动态赋值右侧scroll-view 的 scroll-top 属性，从而实现点击左侧菜单栏时右侧内容区域进行滚动。
9.后台管理系统主页面布局以及左侧导航栏设计
weixin_38644630的博客
11-25 8286
9.后台管理系统主页面布局以及左侧导航栏设计 1.首页布局 步骤： 在views目录下新建Main.vue文件，作为登录之后的布局 参考：element-ui 使用此模块的目的是，当中间内容部分有超出时，可以固定左侧以及头部不动，中间内容进行滚动 代码 <template> <el-container style="height: 100%;"> <el-aside width="200px" style="background-color:blue">
Vue界面右侧始终有滑动栏，页面不能撑满全屏
qq_53782835的博客
04-04 820
【代码】Vue界面右侧始终有滑动栏，页面不能撑满全屏。
vue 左侧栏拖拽右侧宽度不变；出现滚动条
周家大小姐
04-23 2626
demo地址:点击下载 其中封装了自定义指令及公共组件的左侧菜单,菜单效果为双击,可搜索子节点 用户需求,左侧菜单为一次加载出来;可以搜索树控件下所有的子菜单内容 1.左侧菜单可以自由拉宽缩小;右侧内容不变,本人用到的方法是右侧div中嵌入router-view才能做到不缩放 1.左侧菜单默认为200的宽;拉条为15的宽当小于200的时候右侧动态设置宽度,不让右侧空出来 ```views views ├─ AboutView.vue └─ HomeView.v...
隐藏滚动条 页面仍然可以滚动 解决滚动条出现挤压页面宽度，影响布局.
S_peeding的博客
04-01 1350
随手记 直接放图看问题: 出现这种情况就将滚动条隐藏就好了 改为: 这样子就好了,页面依然可以滚动
Vant UI的Sidebar侧边导航组件单独设置滚动条
m0_37922443的博客
07-05 6451
需要实现的效果是：左侧导航栏有单独的滚动条，右侧主体内容也有单独的滚动条，互不干涉。
react侧边栏滚动导航
06-02
你可以使用React和CSS来实现一个侧边栏滚动导航。首先，你需要创建一个包含导航链接的侧边栏组件。然后，使用CSS来设置侧边栏的样式和位置。最后，在React中实现滚动事件，以便在用户滚动页面时，高亮显示当前所在的导航链接。 下面是一个简单的示例代码，可以让你更好地理解如何实现侧边栏滚动导航。 ``` import React, { useState, useEffect } from 'react'; import './styles.css'; function Sidebar() { const [activeLink, setActiveLink] = useState(''); useEffect(() => { const handleScroll = () => { const currentScrollPos = window.pageYOffset; const links = document.querySelectorAll('.sidebar a'); const headerHeight = document.querySelector('.header').offsetHeight; links.forEach(link => { const section = document.querySelector(link.hash); if ( section.offsetTop <= currentScrollPos + headerHeight && section.offsetTop + section.offsetHeight > currentScrollPos + headerHeight ) { setActiveLink(link.hash); } }); }; window.addEventListener('scroll', handleScroll); return () => { window.removeEventListener('scroll', handleScroll); }; }, []); return ( <div className="sidebar"> <a href="#section-1" className={activeLink === '#section-1' ? 'active' : ''}> Section 1 </a> <a href="#section-2" className={activeLink === '#section-2' ? 'active' : ''}> Section 2 </a> <a href="#section-3" className={activeLink === '#section-3' ? 'active' : ''}> Section 3 </a> </div> ); } function App() { return ( <div> <div className="header">Header</div> <div className="content"> <div className="section" id="section-1"> Section 1 </div> <div className="section" id="section-2"> Section 2 </div> <div className="section" id="section-3"> Section 3 </div> </div> <Sidebar /> </div> ); } export default App; ``` 在上面的代码中，我们首先定义了一个`Sidebar`组件，它包含三个导航链接，分别对应三个页面部分。然后，我们使用了`useState`钩子来追踪当前活动的导航链接。在组件渲染时，我们使用`useEffect`钩子来监听`scroll`事件，并根据当前滚动位置来更新活动导航链接的状态。 最后，我们在`App`组件中渲染了一个包含三个页面部分和`Sidebar`组件的父容器。我们还添加了一个顶部的`Header`组件，用于演示如何将侧边栏与其他组件一起使用。 请注意，上面的示例代码仅提供了一个基本的实现，你可能需要根据你的具体需求进行调整和修改。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

伊昂呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值