Javascript 如何为中心内容开发滚动条

我是VueJS的新手。我正在使用Vue和Bootstrap开发一个应用程序。页面分为左侧边栏、顶部导航栏、中心视图和右侧边栏，如下所示：

我期待着开发一个滚动条，使只有中心内容是可滚动的

代码如下：

从“src/components/Dashboard/Views/GridView.vue”导入GridView 从“src/components/Dashboard/Views/ListView.vue”导入ListView 从“src/components/Dashboard/Views/DetailsView.vue”导入DetailsView 导出默认值{ 方法：{ 变更视图{ ifthis.gridView==真{ this.gridView=false； } else ifthis.gridView==false{ this.gridView=true； } }, openDetailsSection{ ifthis.detailsSectionOpen===false{ this.detailsSectionOpen=true； } 这个。$nextTick=>{ const detailsSection=document.getElementByIddetails； const showSection=document.getElementByIdshow； showSection.style.width=80%； //showcsection.classList.removecol-xl-12，col-md-6； } }, closeDetailsSection{ ifdetailsSectionOpen===true{ detailsSectionOpen=false； } const detailsSection=document.getElementByIddetails； const showSection=document.getElementByIdshow； detailsSection.classList.removecol-xl-3； showcsection.classList.removecol-xl-9，col-md-6； showSection.classList.addcol-xl-12、col-md-6； //删除信息按钮 const infoButton=document.getElementById'infoButton'； 如果信息按钮{ infoButton.parentNode.removeChildinfoButton； } }, }, 资料{ 返回{ detailsSectionOpen:false， gridView：没错， 共享：false } }, 组成部分：{ ListView， GridView， 控件 }, 安装{ 让folders=document.getElementsByClassName'folder-rectangle'； folders=Array.fromfolders； folders.forEachfolder=>folder.addEventListener“单击”，单击此.showButton； } } .关联菜单项：悬停{ 背景色：E91E63！重要； } .加上圆圈btn{ 字体大小：70px； 颜色：E91E63； 边界：无； 光标：指针； } li.btn:悬停{ 颜色：E91E63； } .详细资料{ 宽度：261px； 高度：29px； 颜色：424242； 字体系列：“源Sans-Pro”； 字体大小：14px； 文本对齐：左对齐； 线高：1px； 填充物：5px； } .颜色{ 背景色：DCF3FD； } 上下文菜单图标{ 颜色：424242； } .标题矩形{ 高度：155px； 背景：F5； 边框：1px实心E0； 边界半径：0px； 边框底部：无； } .footer矩形{ 高度：65px； 背景：fafa； 边框：1px实心E0； 边界半径：0px； 垂直对齐：中间；文本对齐：中心； } 图像{ 高度：16px； 边界：0px； 颜色：878D99； } .文件名样式{ 高度：26px； 颜色：424242； 字体系列：“源Sans-Pro”； 字体大小：15px； 字体大小：正常； 字体风格：普通； 文字装饰：无； 文本对齐：左对齐； 填充：5px15px； } .文件大小样式{ 高度：26px； 颜色：9E9E9E； 字体系列：“源Sans-Pro”； 字体大小：12px； 文本对齐：左对齐； 线高：1px； 填充：10px 15px； } .面包屑人力资源{ -moz边框底色：无； -moz边框图像：无； -moz边框左侧颜色：无； -moz边框右颜色：无； -moz边框顶部颜色：无； 左边距：15px； 右边距：15px； 边缘底部：25px； 边框：1px实心BDBD； 边际上限：0px； 边框顶部宽度：0px； } .面包屑人力资源详细信息{ -moz边框底色：无； -moz边框图像：无； -moz边框左侧颜色：无； -moz边框右颜色：无； -moz边框顶部颜色：无； 边框：1px实心BDBD； 边际上限：0px； 边框顶部宽度：0px； } .人力资源部详情{ -moz边框底色：无； -moz边框图像：无； -moz边框左侧颜色：无； -moz边框右颜色：无； -moz边框顶部颜色：无； 边框：1px实心BDBD； 边际上限：0px； 边框顶部宽度：0px； } .文件夹矩形{ 高度：63px； 背景色：FFFFFF； 边框：1px实心rgb189、189、189； 边界半径：0px； } .选定的文件夹{ 背景：DCF3FD； 边框：1px实心BDBD； 边界半径：0px； 盒影：0px 0px 5px 0px RGBA3169244,1 } .选定的文件{ 高度：63px； 背景：DCF3FD； 边框：1px实心BDBD； 边界半径：0px； 盒影：0px 0px 5px 0px RGBA3169244,1 } 文件夹图像{ 宽度：29px； 高度：20px； 颜色：878D99； 字体大小：30px； } .上下文菜单{ 宽度：197px； 高度：400px； 背景：FFFFFF； 边框：1px实心FFFFFF； 边界半径：5px； 盒影：0 0 5px 333； } .上下文菜单范围{ 左侧填充：10px； 颜色：424242； } .btn{ 背景色：无； 边界：无； 颜色：灰色； 填充：12px 16px； 字体大小：16px； 光标：指针； } .文件夹名称样式{ 文本对齐：左对齐； 边缘底部：0px； 边缘顶端：13px； 左边距：15px； 左侧填充：10px； 右边填充：10px； 右边距：15px； 颜色：424242； 字体系列：“源Sans-Pro”； 字体大小：15px； 字体大小：正常； 字体风格：普通； 文字装饰：无； } .文件夹大小样式{ 文本对齐：左对齐； 左边距：15px； 边缘底部：13px； 边缘顶部：8px； 左侧填充：10px； 右边填充：10px； 右边距：10px； 颜色：9E9E9E； 字体系列：“源Sans-Pro”，无衬线； 字体大小：12px； } 没有填充物{ 填充：0px； } 网格视图{ 溢出y：滚动； } 网格视图：：-webkit滚动条{ 宽度：1米； } 网格视图：：-webkit滚动条轨迹{ -webkit盒阴影：插图0 0 6px rgba0,0,0.3； } 网格视图：：-webkit滚动条拇指{ 背景色：暗灰色； 轮廓：1px实心板岩灰色； } 文件夹 设置一个固定高度并使用y形溢出，例如：

#show {
    height: 600px;
    overflow-y: scroll;
}

---

谢谢，但是如何访问滚动条元素？我需要样式它的简单，只是编辑一些属性的滚动条，我不放在这里，因为它是一个更大的属性，但我离开谢谢！我已经创建了滚动条，但是，我无法滚动它，尽管我已经设置了overflow-y:scroll。你能告诉我怎样才能让它滚动吗？我已经修改了上面的代码。谢谢我想你的问题已经解决了，你又遇到了另一个问题，我建议你再问另一个问题，因为这个问题可能不再是CSS和HTML了，可能这个框架中的某些东西阻碍了CSS的正确行为，我不能帮你，我举了一个例子让你看看它是如何工作的