Question

我创建了一个侧边栏菜单，但我遇到的问题是，每当我在移动设备上的菜单上移动手指时，它都会尝试滚动移动菜单下方的正文。

我的移动设备菜单有一个叠加层，正文和html设置为overflow:hidden和position:relative，但它仍在尝试滚动。如果我使用谷歌开发者工具设备选项，它不会这样做，它只在我的手机上。

的Javascript

function openNav() {
document.getElementById("mySidenav").style.width = "250px";
$('.sidenav-overlay').css("display","block");
$('.body-wrapper').addClass("lockScroll");
$('body').addClass("lockScroll");
$('html').addClass("lockScroll");
}

function closeNav() {
document.getElementById("mySidenav").style.width = "0";
$('.sidenav-overlay').css("display","none");
$('.body-wrapper').removeClass("lockScroll");
$('body').removeClass("lockScroll");
$('html').removeClass("lockScroll");
}

$('.sidenav-overlay').click(closeNav);

HTML

<header id="mobile-menu">
<div class="row">
<div class="col-xs-10 logoDiv">
  <img class="mobile-logo" src="assets/img/logo4.png" alt="Logo">
</div>
<div class="col-xs-2 menuDiv">
  <div class="menu-button-wrapper">
    <i onclick="openNav()" class="fa fa-bars menu-bars" aria-hidden="true">
</i>
    <!-- <div onclick="openNav()" class="menu-icon">
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
    </div> -->
  </div>
 </div>
</div>
<div class="sidenav-overlay">

</div>
<div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" 
  onclick="closeNav()">&times;</a>
    <nav id="menu" class="menu-container">
    </nav>
  </div>
</header>

CSS

.lockScroll{
  overflow:hidden;
  height:100vh;
  position:relative;
}
.sidenav {
    height: 100vh;
    width: 0;
    position: fixed;
    z-index: 2;
    top: 0;
    right: 0;
    background-color:#6b2323;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 38px;
}
.sidenav-overlay {
  display:none;
  background-color: rgba(0, 0, 0, 0.82);
  height: 100vh;
  width: 100vw;
  z-index: 1;
  position: fixed;
  top: 0px;
}

Answer 1

想出来。

我删除了所有的lockscroll类尝试，并使用javascript来防止touchmove上的默认值。

的Javascript

function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    $('.sidenav-overlay').css("display","block");
    $('html, body').on('touchmove', function(e){
      e.preventDefault();
    });
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    $('.sidenav-overlay').css("display","none");
    $('html, body').unbind('touchmove');
}

Css移动导航体滚动

1 个答案: