无法在VueJS中滚动自定义滚动条

时间：2019-03-11 20:38:40

标签： javascript html css css3 vue.js

我正在使用VueJS和Bootstrap开发应用程序。我正在为id =“ show”的组件开发滚动条。

当点击带有id =“ infoButton”的按钮时，详细信息部分会打开，就像这样

enter image description here

我想要的是，只有id =“ show”（中心组件）的组件可以滚动

这是它的代码：

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.$store.state.gridView){
          this.$store.state.gridView = false;
        }
        else if(!this.$store.state.gridView){
          this.$store.state.gridView = true;
        }
      },

      openDetailsSection() {
        this.buttonClicked = true;
        if(!this.$store.state.detailsSectionOpen){
          this.$store.state.detailsSectionOpen = true;
        }

        this.$nextTick(() => {
          
          const detailsSection = document.getElementById("details");
          const showSection = document.getElementById("show");
          
          showSection.style.width = "80%";
          showSection.style.transition = "0.5s";
        })
                  
      },

      closeDetailsSection(){
        this.buttonClicked = false;
        if(this.$store.state.detailsSectionOpen){
          this.$store.state.detailsSectionOpen = false;
        }
        const detailsSection = document.getElementById("details");
        const showSection = document.getElementById("show");

        detailsSection.style.width = "0%";
        showSection.style.width = "100%";
        
      }
    },

    data(){
      return {

        buttonClicked: false,

        folderDetails : {},

      }
    },

    components: {
      ListView,
      GridView,
      DetailsView
    }
  }
<style>
  #infoButton:focus,
   {
    outline: none;
    box-shadow: none!important;
  }
  
  .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;
    outline: 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;
  }

    /* show */
    #show{
      overflow-y: scroll;
    }
    /* Custom scrollbar */
    #show::-webkit-scrollbar {
      width: 10px;
    }

    /* Track */
    #show::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px grey; 
      border-radius: 5px;
    }
    
    /* Handle */
    #show::-webkit-scrollbar-thumb {
      background: red; 
      border-radius: 5px;
    }

    /* Handle on hover */
    #show::-webkit-scrollbar-thumb:hover {
      background: #b30000; 
    }
</style>
<template>
  <div>
    <ol class="breadcrumb" id="topButtons"
        style="display: flex;margin-top: 8px;padding: 0rem 1rem;background-color: transparent;margin-bottom: 0px;">
      <li class="breadcrumb-item active" style="margin-right: auto; margin-left: 15px; 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;
          padding: 10px 0px;">
          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="!$store.state.gridView" @click="changeView" class="btn">
          <i class="fa fa-th-large"></i>
        </button>
        <button v-if="$store.state.gridView" @click="changeView" class="btn">
          <i class="fa fa-list-ul">
          </i>
        </button>
      </li>
      <li class="pull-right">
        <button v-if="!$store.state.detailsSectionOpen" class="btn" id="infoButton" @click="openDetailsSection">
          <i class="fa fa-info-circle"></i>
        </button>
        <button v-else-if="$store.state.detailsSectionOpen" class="btn" id="infoButton" @click="closeDetailsSection">
          <i class="fa fa-info-circle"></i>
        </button>
      </li>
    </ol>

    <!-- Line break -->
    <hr class="breadcrumb-hr" style="margin-bottom: 0px;margin-left: 30px;margin-right: 30px;">
    
    <div class="content" style="padding-top: 0px;margin-bottom: 15px;padding-bottom: 8px;" id="show">

      <div class="container-fluid">

        <div>
          <!-- Grid view section begins here -->
          <grid-view v-if="$store.state.gridView && 
                          !$store.state.detailsSectionOpen" 
                          :folders="folders" 
                          :recentFiles="recentFiles"
                          :files="files"
                          :buttonClicked="buttonClicked">
          </grid-view>

          <!-- If the details section is open, give a scroller -->
          <grid-view v-else-if="$store.state.gridView && 
                                $store.state.detailsSectionOpen" 
                                :folders="folders" 
                                :recentFiles="recentFiles"
                                :files="files"
                                :buttonClicked="buttonClicked"
                                id="grid-view">
          </grid-view>

          <!-- List View section begins here -->
          <list-view v-if="!$store.state.gridView && 
                            !$store.state.detailsSectionOpen" 
                            :folders="folders" 
                            :recentFiles="recentFiles"
                            :files="files">
          </list-view>

          <!-- If the details section is open, give a scroller -->
          <list-view v-else-if="!$store.state.gridView && 
                            $store.state.detailsSectionOpen" 
                            :folders="folders" 
                            :recentFiles="recentFiles"
                            :files="files" 
                            id="list-view">
          </list-view>

        </div>
      </div>

    </div>

    <details-view 
      v-if="$store.state.detailsSectionOpen"
            @folderDetailsSent="folderDetails = $event"
            @fileDetailsSent="fileDetails = $event"
            id="details"
      >
    </details-view>
  </div>
</template>

尽管对于带有id =“ show”的组件，滚动条出现在之间，但滚动条的拇指不可见，并且我无法滚动它。

有人可以帮我吗？预先感谢。

0 个答案:

没有答案
相关问题
最新问题