Есть код
.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">×</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;
}
внешний вид скроллбара меняется (его размеры), а у меня на компьютере нет. Почему так происходит? Какие настройки могут повлиять на это (или ещё какие-нибудь причины)?