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

Question

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

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

代码如下:

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"开发一个滚动条，这样两个条之间的内容就可以滚动了，但我做不到。

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

Answer 1

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

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