javascript - 滚动条的禁用区域

问题描述

有一个网站

如何显示滚动条（如屏幕截图中 - 以红色突出显示）？

#dropdownwindow {
    display: none;
    margin-left: 0;
    margin-right: 100%;
    height: 100vh;
    z-index: 5;
    /*display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
    "left search search search"
    "left right right right";
    grid-area: mainwindowpart;*/
}
    
#fullblock {
    height: 100vh;
    /*display: grid;*/
    /*grid-template-columns: 4fr 1fr;
    grid-template-areas: 
        "mainwindowpart freespace";*/
    position: static;
}
/*
.CatalogMenuLeft{
    grid-area: left;
    display: none;
}

.CatalogMenuRight{
    grid-area: right;
    display: none;
}

.CatalogMenuSearch {
    grid-area: search;
    display: none;
}

.CatalogFreeSpace {
    grid-area: freespace;
    display: none;
}*/

.contentdropdownwindow {
    display: flex;
}

<div id="dropdownwindow">
        <div class="crossline">
            <div class="close">&times;</div>
        </div>
        <div class="contentdropdownwindow">
            <div class="CatalogMenuLeft">
                    <h1>Каталог</h1>
                    <div >
                        Смартфоны и гаджеты
                    </div>
                    <div>
                        Ноутбуки и компьютеры
                    </div>
                    <div>
                        Телевизоры, аудио-видео, Hi-Fi
                    </div>
                    <div>
                        Бытовая техника для дома и кухни
                    </div>
                    <div>
                        Строительство и ремонт
                    </div>
                    <div>
                        Дом и дача
                    </div>
                    <div>
                        Фото, видео, системы безопасности
                    </div>
                    <div>
                        Автотовары
                    </div>
                    <div>
                        
                    </div>                  
            </div>
            <div class="myscroll">
            
            </div>
            <div class="centerdropdownwindow">
                    <div class="CatalogMenuSearch">
                    </div>
                    <div class="CatalogMenuRight">
                    </div>
            </div>
        </div>
<!--<div>-->        
<!--</div>-->
</div>

应该放什么代码

<div class = "myscroll">

</div>

? （请提供所有可能性 - 我是初学者）。

如何使滚动条的顶部处于非活动状态（顶部的浅灰色变为红色）？重要的是滚动条的顶部是非活动的。

标签： javascripthtmlcssscrollscrollbar

要显示滚动条，不需要额外的 CSS。当容器overflow-y: scroll的内容长度超过容器高度时，它会自动显示出来。如果您想以不同的方式设置滚动条的样式，您可以添加自定义 css。例如下面的代码片段：

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

javascript - 滚动条的禁用区域

问题描述

解决方案

推荐阅读