时间戳

首页 > 解决方案 > 锁定正文滚动，但正文中的某些 div 可以滚动

javascript - 锁定正文滚动，但正文中的某些 div 可以滚动

问题描述

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

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

即使（正文）看起来滚动，我怎样才能使（.menu）可以滚动？

https://jsfiddle.net/n17qw8sb/

我知道有body-scroll-lock。：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;
}

标签： javascriptjquery

解决方案

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

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

推荐阅读