gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 06:27:09 25 4
gpt4 key购买 nike

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

enter image description here

我想开发一个滚动条,这样只有中间的内容可以滚动

代码如下:

import GridView from 'src/components/Dashboard/Views/GridView.vue'
import ListView from 'src/components/Dashboard/Views/ListView.vue'
import DetailsView from 'src/components/Dashboard/Views/DetailsView.vue'

export default {
methods:{

changeView(){
if(this.gridView === true){
this.gridView = false;
}
else if(this.gridView === false){
this.gridView = true;
}
},

openDetailsSection() {
if(this.detailsSectionOpen === false){
this.detailsSectionOpen = true;
}

this.$nextTick(() => {
const detailsSection = document.getElementById("details");
const showSection = document.getElementById("show");

showSection.style.width = "80%";

// showSection.classList.remove("col-xl-12", "col-md-6");
})
},

closeDetailsSection(){
if(detailsSectionOpen === true){
detailsSectionOpen = false;
}
const detailsSection = document.getElementById("details");
const showSection = document.getElementById("show");
detailsSection.classList.remove("col-xl-3");
showSection.classList.remove("col-xl-9", "col-md-6");
showSection.classList.add("col-xl-12", "col-md-6");

// Remove info button
const infoButton = document.getElementById('infoButton');
if (infoButton) {
infoButton.parentNode.removeChild(infoButton);
}
},
},

data(){
return {

detailsSectionOpen: false,

gridView: true,

shared: false

}
},

components: {
ListView,
GridView,
DetailsView
},


mounted(){

let folders = document.getElementsByClassName('folder-rectangle');
folders = Array.from(folders);
folders.forEach((folder) => folder.addEventListener('click', this.showButton));

}
}
.context-menu-item:hover {
background-color: #E91E63 !important;
}

.plus-circle-btn{
font-size: 70px;
color: #E91E63;
border: none;
cursor: pointer;
}

li .btn:hover{
color: #E91E63;
}

.details-ul li{
width: 261px;
height: 29px;
color: #424242;
font-family: 'Source Sans Pro';
font-size: 14px;
text-align: left;
line-height: 1px;
padding: 5px;
}
.color{
background-color: #DCF3FD;
}

#context-menu-icon{
color: #424242;
}

.header-rectangle {
height: 155px;
background: #F5F5F5;
border: 1px solid #E0E0E0;
border-radius: 0px;
border-bottom: none;
}

.footer-rectangle {
height: 65px;
background: #FAFAFA;
border: 1px solid #E0E0E0;
border-radius: 0px;
vertical-align:middle; text-align:center;
}

#image {
height: 16px;
border: 0px;
color: #878D99;
}

.file-name-style{
height: 26px;
color: #424242;
font-family: 'Source Sans Pro';
font-size: 15px;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-align: left;
padding: 5px 15px;
}

.file-size-style{
height: 26px;
color: #9E9E9E;
font-family: 'Source Sans Pro';
font-size: 12px;
text-align: left;
line-height: 1px;
padding: 10px 15px;
}

.breadcrumb-hr {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 25px;
border: 1px solid #BDBDBD;
margin-top: 0px;
border-top-width: 0px;
}

.breadcrumb-hr-details {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border: 1px solid #BDBDBD;
margin-top: 0px;
border-top-width: 0px;
}

.details-section-hr{
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;

border: 1px solid #BDBDBD;
margin-top: 0px;
border-top-width: 0px;
}

.folder-rectangle {
height: 63px;
background-color: #FFFFFF;
border: 1px solid rgb(189, 189, 189);
border-radius: 0px;
}

.folder-selected {
background: #DCF3FD;
border: 1px solid #BDBDBD;
border-radius: 0px;
box-shadow:0px 0px 5px 0px rgba(3,169,244,1)
}

.file-selected {
height: 63px;
background: #DCF3FD;
border: 1px solid #BDBDBD;
border-radius: 0px;
box-shadow:0px 0px 5px 0px rgba(3,169,244,1)
}

#folder-image{
width: 29px;
height: 20px;
color: #878D99;
font-size: 30px;
}

.context-menu{
width: 197px;
height: 400px;
background: #FFFFFF;
border: 1px solid #FFFFFF;
border-radius: 5px;
box-shadow: 0 0 5px #333;
}

.context-menu-span{
padding-left: 10px;
color: #424242;
}

.btn{
background-color: none;
border: none;
color: grey;
padding: 12px 16px;
font-size: 16px;
cursor: pointer;
}

.folder-name-style{
text-align: left;
margin-bottom: 0px;
margin-top: 13px;
margin-left: 15px;
padding-left: 10px;
padding-right: 10px;
margin-right: 15px;
color: #424242;
font-family: 'Source Sans Pro';
font-size: 15px;
font-weight: normal;
font-style: normal;
text-decoration: none;

}

.folder-size-style{
text-align: left;
margin-left: 15px;
margin-bottom: 13px;
margin-top: 8px;
padding-left: 10px;
padding-right: 10px;
margin-right: 10px;
color: #9E9E9E;
font-family: 'Source Sans Pro', sans-serif;
font-size: 12px;
}

#no-padding{
padding: 0px;
}

#grid-view{
overflow-y: scroll;
}

#grid-view::-webkit-scrollbar {
width: 1em;
}

#grid-view::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

#grid-view::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
<template>
<div>
<div class="content" style="padding-top: 3px;" id="show">

<div class="container-fluid">

<ol class="breadcrumb" id="topButtons" style="display: flex;width: 100%;padding: 0rem 1rem;background-color: transparent;margin-bottom: 0px;">
<li class="breadcrumb-item active" style="margin-right: auto; margin-left: 0px; padding-top: 13px; color: #424242;
font-family: 'Source Sans Pro';
font-size: 18px;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-align: left;">
Files
</li>
<li class="pull-right">
<button class="btn">
<i class="fa fa-sort-amount-asc">
</i>
</button>
</li>
<li class="pull-right">
<button v-if="gridView === false" @click="changeView" class="btn">
<i class="fa fa-th-large"></i>
</button>
<button v-if="gridView === true" @click="changeView" class="btn">
<i class="fa fa-list-ul">
</i>
</button>
<button v-if="!detailsSectionOpen" class="btn" id="infoButton" @click="openDetailsSection">
<i class="fa fa-info-circle"></i>
</button>
</li>
</ol>

<!-- Line break -->
<hr class="breadcrumb-hr">

<div>
<!-- Grid view secation begins here -->
<grid-view v-if="gridView === true" :folders="folders" :recentFiles="recentFiles" id="grid-view" >
</grid-view>

<!-- List View section begins here -->
<list-view v-if="gridView === false" :folders="folders" :recentFiles="recentFiles">
</list-view>
</div>
</div>

</div>

<details-view v-if="detailsSectionOpen" id="details"></details-view>
</div>
</template>

我正在尝试为 id="show"开发一个滚动条,这样两个条之间的内容就可以滚动了,但我做不到。

有人可以帮我解决这个问题吗?我真的很感激任何帮助。谢谢!

最佳答案

设置一个固定的高度并使用overflow-y,例子:

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

关于javascript - 如何为中心内容开发滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54975595/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com