关闭菜单时在移动设备中进行水平滚动

Question

我正在使用anime.js 并在移动设备上显示菜单。我正在移动设备上进行水平滚动。

我添加了display:none，这样我的菜单就会隐藏，当用户点击菜单时，我会使用脚本添加display block，但问题是，关闭菜单后我仍然会滚动

添加类的脚本

 $('html').addClass('noscroll');

并在css下面添加

 html.noscroll {
    overflow: hidden;
}

这样滚动就会隐藏起来。如果我关闭菜单，我也会遇到问题。

你能帮我解决这个问题吗？

我正在使用下面的代码。

function menuOpen() {
  $('.menu-background').css('display', 'block');
  anime({
    targets: '.menu-background',
    translateX: ['100vw', 0],
    duration: 1300,
    easing: 'cubicBezier(0.44, -0.01, 0.08, 0.99)'
  });

}
$('.menu-trigger').on('click', function() {
  menuOpen();
});

function menuClose() {
  anime({
    targets: '.menu-background',
    translateX: [0, '100vw'],
    delay: 300,
    duration: 1300,
    easing: 'cubicBezier(0.44, -0.01, 0.08, 0.99)'
  });
}

// trigger menu animation on icon click
$('.menu-icon-close').on('click', function() {
  menuClose();
});

.menu-trigger,
.menu-icon-close {
  display: none;
}

@media all and (max-width: 768px) {
  .menu-trigger,
  .menu-icon-close {
    display: block;
  }
  .menu-background {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #04dcff;
    display: none;
  }
  .menu-background {
    transform: translateX(100vw);
  }
}

<div class="menu-trigger">Open</div>

<div class="menu-background">
  <div class="menu-icon-close">close</div>
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">contact</a></li>
  </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>

Answer 1

您正在考虑正确的方向 - overflow 将解决问题。但是在你的代码中，我看不到你在哪里添加overflow。

其中一种解决方案是将 X 轴的静态溢出添加到整个 body：

body {
    overflow-x: hidden;
}

另一种解决方案，如你所说，必要时使用JS添加。

function menuClose() {
  $('.menu-background').hide(300);
  anime({
    targets: '.menu-background',
    translateX: [0, '100vw'],
    delay: 300,
    duration: 1300,
    easing: 'cubicBezier(0.44, -0.01, 0.08, 0.99)'
  });
}

Answer 2

您可以使用延迟 1300 和队列在功能 menuClose 上设置不显示。

$('.menu-background').delay(1300).queue(function(next) {
      $(this).css('display', 'none'); 
      next();
  });

function menuOpen() {
  $('.menu-background').css('display', 'block');
  anime({
    targets: '.menu-background',
    translateX: ['100vw', 0],
    duration: 1300,
    easing: 'cubicBezier(0.44, -0.01, 0.08, 0.99)'
  });

}
$('.menu-trigger').on('click', function() {
  menuOpen();
});

function menuClose() {
  anime({
    targets: '.menu-background',
    translateX: [0, '100vw'],
    delay: 300,
    duration: 1300,
    easing: 'cubicBezier(0.44, -0.01, 0.08, 0.99)'
  });
  $('.menu-background').delay(1300).queue(function(next) {
      $(this).css('display', 'none'); 
      next();
  });
}

// trigger menu animation on icon click
$('.menu-icon-close').on('click', function() {
  menuClose();
});

.menu-trigger,
.menu-icon-close {
  display: none;
}

@media all and (max-width: 768px) {
  .menu-trigger,
  .menu-icon-close {
    display: block;
  }
  .menu-background {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #04dcff;
    display: none;
  }
  .menu-background {
    transform: translateX(100vw);
  }
}

<div class="menu-trigger">Open</div>

<div class="menu-background">
  <div class="menu-icon-close">close</div>
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">contact</a></li>
  </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>