Как вынести выпадающее меню из overflow: auto?

Question

Есть меню, при переполнение меню, оно уходит вправо и появляется скролл(написанный на js), при клике на меню со стрелочкой выпадает список, но когда появляется скролл список не открывается. Подскажите пожалуйста как сделать так что-бы список открывался? как я понял вся проблема в menu__body{ overflow:auto; }. Есть ли какие-нибудь способы это исправить? все голову сломал. Спасибо!

function scrollBlock() {

    let scrollBlocks = document.querySelectorAll('.scroll');

    if (scrollBlocks) {

        let speed = 2; // Скорость скролла.
        let left = 0;
        let top = 0;
        let drag = false;
        let coorX = 0;
        let coorY = 0;

        scrollBlocks.forEach(scrollBlock => {
            scrollBlock.addEventListener('mousedown', function (e) {
                drag = true;
                coorX = e.pageX;
                coorY = e.pageY;
            });
            document.addEventListener('mouseup', function () {
                drag = false;
                left = scrollBlock.scrollLeft;
                top = scrollBlock.scrollTop;
            });
            scrollBlock.addEventListener('mousemove', function (e) {
                if (drag) {
                    this.scrollLeft = left - (e.pageX - coorX) * speed;
                    this.scrollTop = top - (e.pageY - coorY) * speed;
                }
            });
        });

    }

};

scrollBlock()


const menuItems = document.querySelectorAll('.menu__item');
const menuBody = document.querySelector('.menu__body');
if (menuItems) {


    menuItems.forEach(item => {
        item.addEventListener('click', (e) => {
            menuItems.forEach(el => { el.classList.remove('_active'); });
            item.classList.toggle('_active')
            menuBody.classList.toggle('_active')
        })
        window.addEventListener('click', e => {
            const target = e.target
            if (!target.closest('.menu__items') && !target.closest('.menu__item')) {
                item.classList.remove('_active')
                menuBody.classList.remove('_active')
            }
        })
    })

}

.menu__body {
  width: 100%;
  padding: 0px 15px;
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.menu__body::-webkit-scrollbar {
  display: none;
}

ul {
  margin: -20px;
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
}

li {
  position: relative;
  padding: 20px;
}

.menu__item._active .menu__items {
  opacity: 1;
  pointer-events: auto;
}

.menu__link {
  display: flex;
  flex-direction:row-reverse;
  align-items: center;
}

.menu__link span {
  display: block;
  border: 7px solid transparent;
  border-top: 10px solid green;
  margin: 5px 0px 0px 5px;
}

a {
  white-space: nowrap;
  font-weight: 400;
  font-size: 16px;
  line-height: math.div(19, 16);
  color: #222222;
}

.menu__items {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: auto;
  padding: 10px;
  opacity: 0;
  background: red;
  pointer-events: none;
  transition: opacity 0.3s ease 0s;
  z-index: 44;
}

.menu__items ul {
  flex-direction: column;
  margin: -10px 0px;
}

menu__items li {
  padding: 10px 0px;
}

<nav class="menu__body scroll">
  <ul>
    <li class="menu__item">
      <a href="#" class="menu__link">Абонентам</a>
    </li>
    <li class="menu__item">
      <a href="#" class="menu__link">
        <span></span>
        Тарифы
      </a>
      <div class="menu__items">
        <ul>
          <li>
            <a href="#">Тарифы</a>
          </li>
          <li>
            <a href="#">Тарифы</a>
          </li>
          <li>
            <a href="#">Тарифы</a>
          </li>
        </ul>
      </div>
    </li>
    <li class="menu__item">
      <a href="#" class="menu__link">Контакты</a>
    </li>
    <li class="menu__item">
      <a href="#" class="menu__link">Частые вопросы</a>
    </li>
    <li class="menu__item">
      <a href="#" class="menu__link">О компании</a>
      <div class="menu__items">
        <ul>
          <li>
            <a href="#">О компании</a>
          </li>
          <li>
            <a href="#">О компании</a>
          </li>
          <li>
            <a href="#">О компании</a>
          </li>
        </ul>
      </div>
    </li>
    <li class="menu__item">
      <a href="#" class="menu__link">Частые вопросы</a>
    </li>
    <li class="menu__item">
      <a href="#" class="menu__link">Частые вопросы</a>
    </li>
    <li class="menu__item">
      <a href="#" class="menu__link">Частые вопросы</a>
    </li>
    <li class="menu__item">
      <a href="#" class="menu__link">Частые вопросы</a>
    </li>
    <li class="menu__item">
      <a href="#" class="menu__link">Частые вопросы</a>
    </li>
    <li class="menu__item">
      <a href="#" class="menu__link">Частые вопросы</a>
    </li>
    <li class="menu__item">
      <a href="#" class="menu__link">Частые вопросы</a>
    </li>
  </ul>
</nav>

БЛОГ НА HUSL

Как вынести выпадающее меню из overflow: auto?

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