0

Есть сайт

screensubwindow

В окне .dropdownwindow есть столбец .windowmenuist, для которого нужен скроллбар

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');
        
        }
        
        let closebutton=document.querySelector('.close');
        /*closebutton.style.position="relative";*/
        closebutton.onclick = function () {
                document.getElementById('dropdownwindow').style.display="none";
        }
.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.

1
  • 1
    Зачем вы каждый раз ищите элемент document.getElementById('dropdownwindow')? Почему бы его не записать в переменную и использовать ее? 17 июл 2021 в 10:34

1 ответ 1

0

Нужно windowmenulist задать фиксированную высоту. Например height: 200px;

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');
        
        }
        
        let closebutton=document.querySelector('.close');
        /*closebutton.style.position="relative";*/
        closebutton.onclick = function () {
                document.getElementById('dropdownwindow').style.display="none";
        }
.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;
    height: 200px;
}

.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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.