Неправильная ширина скроллбара на странице

Question

Есть код

.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: 50px;
  scrollbar-color: blue orange;
}

/* Works on Chrome, Edge, and Safari */
.windowmenulist::-webkit-scrollbar {
  width: 5px;
}

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

.windowmenulist::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 2.5px;
  border: 0px 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;
}

<html>
<head>
<!-- <link rel="stylesheet" href="testsite.css">-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>ScrollTest</title>
<!--<link rel="stylesheet" href="../simplebar/packages/simplebar/src/simplebar.css"></link>-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="../css/scroll.css"></link>

<!-- <script>
 
document.addEventListener("DOMContentLoaded", function() {

    let sidemenu = document.querySelector('#sidemenu');
    sidemenu.addEventListener("mouseover", checkitem);
    sidemenu.addEventListener("mouseleave", checkitem);
 
    function checkitem(event) {
        if (event.target && event.target.closest(".fa")) sidemenu.classList.add("active");
        if (event.type === "mouseleave") sidemenu.classList.remove("active");
    }
});
</script> -->

<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>

</script>
<!--<noscript>
  <style>
    /**
    * Reinstate scrolling for non-JS clients
    */
    .simplebar-content-wrapper {
      overflow: auto;
    }
  </style>
</noscript>-->
</head>
<body>
<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>
</body>
</html>

и внешний вид страницы

Здесь на сайте при изменении свойств

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

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

внешний вид скроллбара меняется (его размеры), а у меня на компьютере нет. Почему так происходит? Какие настройки могут повлиять на это (или ещё какие-нибудь причины)?

БЛОГ НА HUSL

Неправильная ширина скроллбара на странице

Ответы (0 шт):