0

Есть элемент html страницы https://www.citilink.ru/

введите сюда описание изображения

введите сюда описание изображения

левое боковое меню, которое по высоте не помещается на странице. Каким образом можно реализовать скроллбар для него?

.CatalogMenuLeft {
    width: 25%;
}

.CatalogMenuRight {
    /*height: 1278px;*/
}

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


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

.crosslineright {
    width: 100%;
    /*margin-top: 40px;*/
    /*margin-left: 20px;*/
    /*margin-right: 20px;*/
    /*align: right;*/
    text-align: right;
}

.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-y: scroll;*/
    /*height: 70%;*/
}

.menulistitem_selected {
    font-weight: bold;
    cursor: pointer;
}

.menulistitem_selected::after {
    content: "\2192";
    /*position: absolute;*/
    margin-left: 5px;
    display: inline-block;
    font-weight: 400;
    transition: all .1s ease;
}

.close {
        margin-top: -14px;
        padding-top: 5px;
        padding-left: 5px;
        padding-right: 5px;
        font-size: 24px;
        cursor: pointer;
        display: inline-block;
}


.CatalogMenuRight {
    /*flex: 1;*/
    overflow: auto;
    height: 600px;
}


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

/* Works on Firefox */

.CatalogMenuRight {
  scrollbar-width: auto;
  scrollbar-color: #b8b8bc #f5f5f6;
  /*overflow-y: scroll;*/
  /*height: 200px;*/
}


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

.CatalogMenuRight::-webkit-scrollbar-button {
    display: none;
}

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

.CatalogMenuRight::-webkit-scrollbar-track {
  background: #f5f5f6;
}

.CatalogMenuRight::-webkit-scrollbar-thumb {
  background: #b8b8bc;
  border-radius: 2.5px;
  border: 0px solid #f5f5f6;
}

.CatalogMenuRight::-webkit-scrollbar-thumb:hover {
    background: #b8b8bc;
}

#dropdownwindowright {
    width: 75%;
}

.CatalogMenuSearch #SearchBlock {
    /*border-bottom: 1px solid orange;*/
}

#SearchBlock {
    padding-top: 5px;
    /*padding-left: 25px;*/
    margin-left: 25px;
    margin-right: 50px;
    /*padding-right: 50px;*/
    display: flex;
    /*justify-content: flex-end;*/
    height: 35px;
    border-bottom: 1px solid #dfdfe1;
}

#SearchInputdiv {
    height: 100%;
    width: calc(100%-35px);
    flex: 1;
    /*color: #dfdfe1;*/
    /*flex: calc(100%-35px);*/
}

#SearchInput {
    width: 100%;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
}

#SearchButtondiv {
    height: 100%;
    justify-content: flex-end;
    width: 35px;
    /*flex: 35px;*/
}

#SearchButton button svg{
    vertical-align: middle;
    fill: #dfdfe1;
    /*justify-content: flex-end;
    flex: 35px;*/
}

#SearchButton {
  outline: none;
  border: none;
  background: transparent;
  cursor: pointer;
}

#SearchButton:active {
  outline: 1px solid blue;
}

#menulist {
  flex: 1;
  overflow: auto;
  /*height: ;*/
}

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


/* Works on Firefox */

#menulist {
  scrollbar-width: auto;
  scrollbar-color: #b8b8bc #f5f5f6;
  /*overflow-y: scroll;*/
  /*height: 200px;*/
}


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

#menulist::-webkit-scrollbar-button {
  display: none;
}

#menulist::-webkit-scrollbar {
  width: 5px;
}

#menulist::-webkit-scrollbar-track {
  background: #f5f5f6;
}

#menulist::-webkit-scrollbar-thumb {
  background: #b8b8bc;
  border-radius: 3px;
  border: 0px solid #f5f5f6;
}

#menulist::-webkit-scrollbar-thumb:hover {
  background: #b8b8bc;
}
<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" id="menulist">
      <div class="menulistitem" id="smartphonesandgadgets">
        Смартфоны и гаджеты
      </div>
      <div class="menulistitem" id="notebooksandpcs">
        Ноутбуки и компьютеры
      </div>
      <div class="menulistitem" id="tvsaudiovideohifi">
        Телевизоры, аудио-видео, Hi-Fi
      </div>
      <div class="menulistitem" id="householdappliancesforhomeandkitchen">
        Бытовая техника для дома и кухни
      </div>
      <div class="menulistitem" id="constructionandrepair">
        Строительство и ремонт
      </div>
      <div class="menulistitem" id="houseandcottage">
        Дом и дача
      </div>
      <div class="menulistitem" id="photosvideossecuritysystems">
        Фото, видео, системы безопасности
      </div>
      <div class="menulistitem" id="automotiveproducts">
        Автотовары
      </div>
      <div class="menulistitem" id="officesuppliesfurnitureandofficeequipment">
        Канцтовары, Мебель и Офисная техника
      </div>
      <div class="menulistitem" id="beautyandhealth">
        Красота и здоровье
      </div>
      <div class="menulistitem" id="sportsandrecreation">
        Спорт и отдых
      </div>
      <div class="menulistitem" id="productsforgamers">
        Товары для геймеров
      </div>
      <div class="menulistitem" id="discountedproducts">
        Уцененные товары
      </div>
      <div class="menulistitem" id="giftcertificates">
        Подарочные сертификаты
      </div>
      <div class="menulistitem" id="services">
        Сервисы и услуги
      </div>
    </div>
  </div>
</div>

5
  • я же отвечал вам, как нужно делать скроллбар... 6 сен 2021 в 14:08
  • @highpassion дело в том, что высота блока больше, чем размер экрана.
    – gitfront
    6 сен 2021 в 14:12
  • вам даже не нужно добавлять этот overflow, у вас div.ps--active-y>.ps__rail-y сам выскакивает, если контент переполняет контейнер, посмотрите внимательно 6 сен 2021 в 14:39
  • а на втором скрине у вас не скроллбар для левого меню? там где смартфоны и гаджеты 6 сен 2021 в 14:47
  • @highpassion см. ru.stackoverflow.com/questions/1306113/…
    – gitfront
    6 сен 2021 в 16:14

1 ответ 1

0

Чтобы добавить скролл используйте свойство overflow

overflow: scroll;

Если только по высоте то

overflow-y: scroll;

В вашем конкретном случае нужно ещё и ограничить его высоту по высоте экрана

.flexcontent {
    display: flex;
    overflow-y: scroll;
    height: 100vh;
}

Ваш ответ

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

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