css 滚动中断 _大数据知识库

有一个网站
[屏幕子窗口][1]
在窗口.dropdownwindow中有一列.windowmenulist，在该列中需要一个滚动条

let cataloglistbutton = document.querySelector('.catalogbutton');
let divmenuleft = document.querySelector('.CatalogMenuLeft');
let divmenusearch = document.querySelector('.CatalogMenuSearch');
let divmenuright = document.querySelector('.CatalogMenuRight');
let divfreespace = document.querySelector('.CatalogFreeSpace');

cataloglistbutton.onclick = function() {
  console.log('Before');
  if (document.getElementById('dropdownwindow').style.display == "none") {
    document.getElementById('dropdownwindow').style.position = "fixed";
    document.getElementById('dropdownwindow').style.marginLeft = "0";
    document.getElementById('dropdownwindow').style.marginTop = "0";
    document.getElementById('dropdownwindow').style.display = "block";
    console.log(document.getElementById('dropdownwindow').style.display);
    document.getElementById('dropdownwindow').style.marginRight = "20%";
    document.getElementById('dropdownwindow').style.width = "80%";
    /*divfreespace.style.width="20%";
    divmenuleft.style.display="block";
    divmenuright.style.display="block";     divmenusearch.style.display="block";
    divfreespace.style.display="block";*/
    document.getElementById('dropdownwindow').style.backgroundColor = "#ffffff";
    const simpleBar = new SimpleBar(document.querySelector('.windowmenulist'));
    /*simpleBar.style.visibility="visible";*/
    document.querySelector('.windowmenulist.simplebar-track.simplebar-vertical').style.visibility = "visible";
    document.querySelector('.windowmenulist.simplebar-track.simplebar-vertical.simplebar-scrollbar').style.height = "100%";
    document.querySelector('.windowmenulist.simplebar-track.simplebar-vertical.simplebar-scrollbar').style.display = "block";
    /*document.getElementById('dropdownwindow').style.position="absolute";*/
    /*document.getElementById('dropdownwindow').style.marginBottom="0px";
    document.getElementById('dropdownwindow').style.paddingBottom="0px";*/
  } else {
    document.getElementById('dropdownwindow').style.display = "none";
    document.getElementById('dropdownwindow').style.position = "fixed";
    document.getElementById('dropdownwindow').style.marginLeft = "0";
    document.getElementById('dropdownwindow').style.marginTop = "0";
    console.log(document.getElementById('dropdownwindow').style.display);
    document.getElementById('dropdownwindow').style.marginRight = "0";
    document.getElementById('dropdownwindow').style.width = "0";
    /*divfreespace.style.width="0";
    divfreespace.style.marginRight="100%";
    divmenuleft.style.display="none";
    divmenuright.style.display="none";      divmenusearch.style.display="none";
    divfreespace.style.display="none";*/
    document.getElementById('dropdownwindow').style.backgroundColor = "#ffffff";
    /*document.getElementById('dropdownwindow').style.marginBottom="0px";               
    document.getElementById('dropdownwindow').style.paddingBottom="0px";*/
  };

  console.log('After');

}

.contentdropdownwindow {
  display: flex;
  /*justify-content: center;*/
}

.CatalogMenuLeft {
  width: 25%;
  /*margin-left: auto;
    margin-right: auto;*/
}

.catalogheader {
  width: 100%;
  height: 30%;
  /*display: flex;*/
  /*justify-content: center;*/
  margin-left: auto;
  margin-right: auto;
}

/*.flexelem {
    flex: 1;
    
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}*/

.crossline,
.bottompart {
  flex: 1;
  /*width: 100%;*/
  /*height: 33%;*/
}

.windowheader {
  flex: 1;
  /*width: 100%;*/
  /*height: calc(100% - 2*37.5px);*/
  /*height: 34%;*/
  margin: auto;
  text-align: center;
}

.windowheader h4 {
  flex: 1;
  /*width: 100%;*/
  margin: auto;
  text-align: center;
}

.flexdisabledscrollbar1,
.flexdisabledscrollbar2,
.flexdisabledscrollbar3 {
  flex: 0;
  width: 5px;
  border-right: 5px solid #f5f5f6;
}

.flexline1 {
  display: flex;
  justify-content: center;
  height: 33%;
}

.flexline2 {
  display: flex;
  justify-content: center;
  height: 34%;
}

.flexline3 {
  display: flex;
  justify-content: center;
  height: 33%;
}

.flexcontent {
  display: flex;
  overflow: auto;
}

.flexenabledscrollbar {
  flex: 0;
  width: 5px;
  border-right: 5px solid #f5f5f6;
}

.windowmenulist {
  flex: 1;
  overflow: auto;
}

.menulistitem {
  padding-top: 5px;
  padding-bottom: 5px;
}

/* Works on Firefox */

.windowmenulist {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}

/* Works on Chrome, Edge, and Safari */

.windowmenulist::-webkit-scrollbar {
  width: 12px;
}

.windowmenulist::-webkit-scrollbar-track {
  background: orange;
}

.windowmenulist::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 20px;
  border: 3px solid orange;
}

/*
.simplebar-content-wrapper {
    overflow: auto;
}

.simplebar-track.simplebar-vertical {
        background-color: #f5f5f6;
        width: 5px;
        visibility: visible;
}

.simplebar-scrollbar {
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: 1;
    background-color: #e2e2e4;
}

.simplebar-track.simplebar-vertical.simplebar-scrollbar {
    top: 0;
    bottom: 0;
}

.simplebar-scrollbar.simplebar-visible {
    opacity: 1;
}
*/

.close {
  margin-top: -14px;
  padding-right: 0px;
  font-size: 24px;
  cursor: pointer;
}

<div id="dropdownwindow">
  <!-- <div class="crossline">
            <div class="close">&times;</div>
        </div> -->
  <div class="contentdropdownwindow">
    <div class="CatalogMenuLeft">
      <div class="catalogheader">
        <div class="flexline1">
          <div class="crossline">
          </div>
          <div class="flexdisabledscrollbar1">
          </div>
        </div>
        <div class="flexline2">
          <div class="windowheader">
            <h4>Каталог</h4>
          </div>
          <div class="flexdisabledscrollbar2">
          </div>
        </div>
        <div class="flexline3">
          <div class="bottompart">
          </div>
          <div class="flexdisabledscrollbar3">
          </div>
        </div>
      </div>

      <div class="flexcontent">
        <div class="windowmenulist">
          <div class="menulistitem">
            Смартфоны и гаджеты
          </div>
          <div class="menulistitem">
            Ноутбуки и компьютеры
          </div>
          <div class="menulistitem">
            Телевизоры, аудио-видео, Hi-Fi
          </div>
          <div class="menulistitem">
            Бытовая техника для дома и кухни
          </div>
          <div class="menulistitem">
            Строительство и ремонт
          </div>
          <div class="menulistitem">
            Дом и дача
          </div>
          <div class="menulistitem">
            Фото, видео, системы безопасности
          </div>
          <div class="menulistitem">
            Автотовары
          </div>
          <div class="menulistitem">
            Канцтовары, Мебель и Офисная техника
          </div>
          <div class="menulistitem">
            Красота и здоровье
          </div>
          <div class="menulistitem">
            Спорт и отдых
          </div>
          <div class="menulistitem">
            Товары для геймеров
          </div>
          <div class="menulistitem">
            Уцененные товары
          </div>
          <div class="menulistitem">
            Подарочные сертификаты
          </div>
          <div class="menulistitem">
            Сервисы и услуги
          </div>
        </div>
        <div class="flexenabledscrollbar">

        </div>
      </div>
    </div>
    <div class="myscroll">

    </div>
    <div class="centerdropdownwindow">
      <div class="CatalogMenuSearch">
      </div>
      <div class="CatalogMenuRight">
      </div>
    </div>
  </div>
  <!--<div>-->
  <!--</div>-->
</div>

<script type="text/javascript" src="../js/currentversion.js"></script>

告诉我如何将滚动条添加到.windowmenulist块。

css 滚动中断

1条答案

相关问题

热门标签

最新问答