Проблемы с прокруткой, css и vue

Я действительно новичок в этой теме, но я работаю с vue и css, я сделал адаптивное меню, но теперь мне сложно поместить ТОЛЬКО прокрутку в раскрывающееся меню

у меня проблема в том, что когда я прокручиваю, вся моя страница перемещается, и это неверно, мне просто нужно опустить меню, а не всю страницу

Как вы можете видеть на изображении, я хочу прокрутить только то, что находится в красном прямоугольнике (меню), поиск в Интернете мне не удалось заставить его работать

@media (max-width: 828px) {
    #menu-header.show {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
    #accordion-mbl-menu {
        margin: 0;
        .panel {
            box-shadow: none !important;
            background-color: transparent;
            border-radius: 0;
            border: 0;
            margin-bottom: 0;
            >button.collapsed {
                color: #001e50;
                >.icon {
                    -webkit-transform: rotate(0deg);
                    transform: rotate(0deg);
                }
            }
            >button.not-collapsed>.icon {
                -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
            }
            >button {
                margin: 0px;
                padding: 0px;
                width: 100%;
                height: 55px;
                font-size: 20px;
                font-family: "VWHead-Bold";
                font-weight: normal;
                color: #2f3538;
                text-decoration: none;
                outline: none !important;
                border-bottom: 1px solid #dee1e3;
                padding-right: 15px;
                position: relative;
                display: -webkit-box;
                display: -webkit-flex;
                display: -moz-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -webkit-align-items: center;
                -moz-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                >.icon {
                    width: 20px;
                    height: 20px;
                    fill: currentColor;
                    -webkit-transition: all 350ms ease;
                    transition: all 350ms ease;
                    position: absolute;
                    right: 15px;
                    top: auto;
                }
                .collapse.in {
                    display: block;
                }
            }
        }
    }
    .login-section {
        height: 36px;
        position: fixed;
        bottom: 56px;
        width: 100%;
        a {
            font-family: "VWText-Regular";
            color: #000000;
            font-size: 14px;
            height: 100%;
            width: 100%;
            img.icon {
                position: relative;
                top: -5px;
                width: 24px;
                height: 24px;
            }
            .text-account {
                padding-left: 5px;
                position: relative;
                top: 2px;
            }
        }
    }
}

Мой код VUE

<div id = "menu-mobile-cats" class = "scrollbar-outer scroll-content scroll-scrolly_visible">
    <div class = "panel-group" id = "accordion-mbl-menu">
      <div class = "panel">
        <b-navbar-toggle target = "collapse-cat-lvl1-469">
          Accesorios
          <img src = "@/assets/images/layout/menu/chevron.svg" class = "icon">
        </b-navbar-toggle>
        <div style = "background-color:white;">
          <b-collapse id = "collapse-cat-lvl1-469">
            <div data-cat-acc = "473" class = "grid-item parent-lvl-2">
              <a class = "link -1 grid-sty-1" href = "#" target = "_self" data-menu-item-id = "473">
                <span class = "text">GTI</span>
              </a>
            </div>
            <div data-cat-acc = "474" class = "grid-item parent-lvl-2">
              <a class = "link sty-1 grid-sty-1" href = "#" target = "_self" data-menu-item-id = "474">
                <span class = "text">Pets</span>
              </a>
            </div>

Если кто-то может сказать мне, где взять пример или помочь мне в этом, как я уже упоминал, я в этом новичок

Добро пожаловать в Stack Overflow! Пожалуйста, включите обработанный HTML и обработанный CSS. Без вашего HTML это действительно сложно отладить. Пожалуйста, прочтите как создать минимально воспроизводимый пример.

— 06.04.2021 00:39

css vue.js

06.04.2021 00:19

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Ответы 1

Установите {overflow-y: scroll;} на родительlist и присвойте ему конкретныйheight.
Вы можете играть с var times в Добавлять или Удалитьli для тестирования.
Полоса прокрутки скрыта - вы можете настроить ее так, чтобы она подходила для небольших устройств.

// get the list
var list = document.getElementById("list");
// Array to hold HTML output
var output = [];
// Add and remove "li" for testing
var times = 15;

for (let x = 0; x < times; x++){
  let item = `<li><a href = "#">Text</a></li>`;
  output.push(item);
}

list.innerHTML = output.join('');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper {
  border: 1px solid;
  width: 200px;
  height: 300px;
  margin: 20px auto;
  overflow-y: scroll;
}

.wrapper > ul {
  list-style-type: none;
}

.wrapper::-webkit-scrollbar {
  width: 10px;
}

.wrapper > ul > li {
  border-bottom: 1px solid;
  height: 40px;
}

<div class = "wrapper">
  <ul id = "list"></ul>
</div>

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

— 06.04.2021 01:55

06.04.2021 00:34