Question

在移动设备中，当用户触摸（.menu-btn）时，将显示（.menu），并且（body）被锁定以滚动。

但是问题是（.menu）也被查看了。

即使（body）看起来可以滚动，如何使（.menu）滚动？

我知道那里有身体滚动锁。：https://github.com/willmcpo/body-scroll-lock

不幸的是，我不允许对此使用webpack：（

<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;
}

Answer 1

添加一个.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>

注意：以全页视图查看结果

锁定主体滚动，但主体中的某些div可能滚动

1 个答案: