Блокировка прокрутки тела, но некоторые прокрутки в теле можно прокрутить - PullRequest
Новая
       3

Блокировка прокрутки тела, но некоторые прокрутки в теле можно прокрутить

1 голос
/ 11 октября 2019

В мобильном устройстве, когда пользователь касается (.menu-btn), отображается (.menu) и (тело) блокируется для прокрутки.

Но проблема в том, что (.menu) тоже выглядела тоже.

Как сделать так, чтобы (.menu) можно было прокручивать, даже если (тело) просматривается для прокрутки?

https://jsfiddle.net/n17qw8sb/

Я знаю, что есть блокировка прокрутки тела. : https://github.com/willmcpo/body-scroll-lock

К сожалению, я не могу использовать веб-пакет для этого: (

<body>

    <header>
        <h2> Top area </h2>
        <div class="menu-btn">

        </div>

        <div class="menu">
            <h2> Hamburger menu area </h2>
        </div>
    </header>
    <section class="contents">


        <h2> Contents area </h2>

    </section>

</body>

$('.menu-btn').on('click', function() {
   $('.menu').toggleClass('active');
   $('body').toggleClass('lock-scroll');
   $('html').toggleClass('lock-scroll');
})

body {
  width: 100%;
  background-color: lavender;
}

body.lock-scroll {
  overflow: hidden;
}

html.lock-scroll {
  overflow: hidden;
}

header {
  width: 100%;
  height: 3em;
  position: fixed;
  top: 0;
  background-color: beige;
  z-index: 100;

}

.menu-btn {
  width: 1em;
  height: 1em;
  background-color: lightseagreen;
  position: fixed;
  z-index: 300;
  top: 1em;
  right: 1em;
}

.menu {
  width: 100%;
  height: 130vh;
  position: fixed;
  top: 0;
  z-index: 200;
  padding-top: 40%;
  background-color: rgba(255,255,255, .5);
  transform: translateX(100%);
  transition: all .5s ease;
}

.menu.active {
  transform: translateX(0%);
}

.contents {
  width: 100%;
  padding-top: 50%;
  height: 150vh;
  background-color: lightblue;
}

h2 {
  text-align: center;
}

1 Ответ

0 голосов
/ 11 октября 2019

добавьте элемент .menu-content и поместите в него содержимое элемента .menu.

А также добавьте этот стиль в конец вашего стиля 

.menu {
  height: 100%;
  overflow: scroll;
}
.menu-content {
  height: 130vh;
}

https://jsfiddle.net/dm8zrabx/

$('.menu-btn').on('click', function() {
   $('.menu').toggleClass('active');
   $('body').toggleClass('lock-scroll');
   $('html').toggleClass('lock-scroll');
})
body {
  width: 100%;
  background-color: lavender;
}

body.lock-scroll {
  overflow: hidden;
}

html.lock-scroll {
  overflow: hidden;
}

header {
  width: 100%;
  height: 3em;
  position: fixed;
  top: 0;
  background-color: beige;
  z-index: 100;

}

.menu-btn {
  width: 1em;
  height: 1em;
  background-color: lightseagreen;
  position: fixed;
  z-index: 300;
  top: 1em;
  right: 1em;
}

.menu {
  width: 100%;
  height: 130vh;
  position: fixed;
  top: 0;
  z-index: 200;
  padding-top: 40%;
  background-color: rgba(255,255,255, .5);
  transform: translateX(100%);
  transition: all .5s ease;
}

.menu.active {
  transform: translateX(0%);
}

.contents {
  width: 100%;
  padding-top: 50%;
  height: 150vh;
  background-color: lightblue;
}

h2 {
  text-align: center;
}

/*  newly added style */
.menu {
  height: 100%;
  overflow: scroll;
}
.menu-content {
  height: 130vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>

    <header>
        <h2> Top area </h2>
        <div class="menu-btn">
            
        </div>
        
        <div class="menu">
          <div class="menu-content">
                <h2> Hamburger menu area </h2>
          </div>
        </div>
    </header>
    <section class="contents">
    
    
        <h2> Contents area </h2>
    
    </section>

</body>

Примечание. См. Результат в полноэкранном режиме просмотра

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...