我想找到一个解决方案，在菜单打开时禁用页面滚动，但我不想在页面宽度跳跃时隐藏滚动条。我看到了一些关于如何禁用滚动的建议，但到目前为止，我所尝试的都没有达到我所要求的效果，滚动条仍在视图中等。我花了几个小时的时间试图解决这个问题，但迄今为止运气不佳，所以非常感谢任何帮助。
jQuery(document).ready(function($){
$('.btn-open-menu').click(function () {
$('header').addClass('open');
$('html').addClass('open');
});
$('.link-menu').click(function () {
$('header').removeClass('open');
$('html').removeClass('open');
});
$('.btn-close-menu').click(function () {
$('header').removeClass('open');
$('html').removeClass('open');
});
$('.btn-open-menu2').click(function () {
$('header').addClass('open');
$('html').addClass('open');
});
$('.link-menu').click(function () {
$('header').removeClass('open');
$('html').removeClass('open');
});
$('.btn-close-menu2').click(function () {
$('header').removeClass('open');
$('html').removeClass('open');
});
});/*html.open { overflow: hidden; }*/
header {
width: 100%;
background-color: transparent;
position: fixed;
top: 0;
left: 0;
z-index: 10;
transition: 0.5s ease-in-out;
}
header .btn-open-menu {
width: 25px;
height: 25px;
position: absolute;
top: 50px;
right: 50px;
cursor: pointer;
}
@media only screen and (max-width: 768px) {
header .btn-open-menu {
top: 25px;
right: 20px;
}
}
@media only screen and (max-width: 768px) {
header .header-content {
width: 100% !important;
}
}
header .header-content {
width: 30%;
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
background-color: #FB4D98;
box-sizing: border-box;
position: absolute;
top: 0;
left:initial; right: -100%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
flex-direction: column;
align-content: center;
transition: 0.8s ease-in-out;
}
@media only screen and (max-width: 768px) {
header .header-content .btn-close-menu {
top: 20px !important;
right: 20px !important;
}
}
header .header-content .btn-close-menu {
width: 25px;
height: 25px;
position: absolute;
top: 50px;
right: 50px;
cursor: pointer;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
flex-direction: row;
align-content: center;
}
header .header-content .btn-close-menu:before, header .header-content .btn-close-menu:after {
background: #F4FB82;
content: '';
display: block;
width: 100%;
height: 4px;
position: absolute;
transition: 0.5s ease-in-out;
}
header .header-content .btn-close-menu:before {
transform: rotate(45deg);
}
header .header-content .btn-close-menu:hover{
transform: rotate(180deg);
transition:0.5s ease-in-out;
}
header .header-content .btn-close-menu:after {
transform: rotate(-45deg);
}
header .header-content nav {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
flex-direction: column;
align-content: center;
}
header .header-content nav a {
color: #000;
letter-spacing: 0.5px;
line-height: 35px;
text-decoration: none;
transition: 0.5s;
}
header .header-content nav a:hover {
color: rgba(0, 0, 0, 0.5);
transition: 1s;
}
header .header-content .social {
display: flex;
justify-content: center;
align-items: center;
margin: 40px 0 0 0;
font-size: 20px;
}
header .header-content .social a {
color: #000;
text-decoration: none;
margin: 0 10px;
transition: 0.5s;
}
header .header-content .social a:hover {
color: #F4FB82;
transform: scale(1.5);
transition: 0.5s;
}
header.open {
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
transition: 0.5s ease-in-out;
}
header.open .btn-open-menu, header.open .logo {
opacity: 0;
transition: 1s ease-in-out;
}
header.open .header-content {
left:initial; right: 0;
transition: 0.8s ease-in-out;
}
.Menu-list {
font-family: "alliance";
font-size: 4vw;
line-height: 1.2;
text-transform: uppercase;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
@media only screen and (max-width: 768px) {
.Menu-list {
font-family: "alliance";
font-size: 12vw;
}
}
.Menu-list-item {
position: relative;
color: transparent;
cursor: pointer;
}
ul.Menu-list{
padding-inline-start: 0px !important;
}
.Menu-list-item::before {
content: '';
display: block;
position: absolute;
top: 49%;
left: -10%;
right: -10%;
height: 4px;
border-radius: 4px;
margin-top: -2px;
background: #F4FB82;
transform: scale(0);
z-index: 1;
}
.Mask {
display: block;
position: absolute;
overflow: hidden;
color: #F4FB82;
top: 0;
height: 49%;
transition: all 1s cubic-bezier(0.16, 1.08, 0.38, 0.98);
}
@media only screen and (max-width: 768px) {
.Mask {
transition: all 0.2s cubic-bezier(0.16, 1.08, 0.38, 0.98);
}
}
.Mask span {
display: block;
}
.Mask + .Mask {
top: 48.9%;
height: 51.1%;
}
.Mask + .Mask span {
transform: translateY(-49%);
}
.Menu-list-item:hover .Mask, .Menu-list-item:active .Mask {
color: #000;
transform: skewX(12deg) translateX(5px);
}
.Menu-list-item:hover .Mask + .Mask, .Menu-list-item:active .Mask + .Mask {
transform: skewX(12deg) translateX(-5px);
}
.Menu-list-item:hover::before, .Menu-list-item:active::before {
transform: scale(1);
}
.copyright {
position: fixed;
bottom: 20px;
font-family: "alliance";
font-size: 14px;
color: black;
white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<a class="btn-open-menu">
<span class="hamburguer"><img src="/wp-content/uploads/2020/08/hamburger.png"</span>
</a>
<div class="header-content">
<a class="btn-close-menu"></a>
<nav>
<div class="Menu">
<ul class="Menu-list" data-offset="10">
<li class="Menu-list-item" data-offset="20" onclick="location.href='/home';">
Home
<span class="Mask"><span>Home</span></span>
<span class="Mask"><span>Home</span></span>
</li>
<li class="Menu-list-item" data-offset="16" onclick="location.href='/about';">
About
<span class="Mask"><span>About</span></span>
<span class="Mask"><span>About</span></span>
</li>
<li class="Menu-list-item" data-offset="12" onclick="location.href='/contact';">
Contact
<span class="Mask"><span>Contact</span></span>
<span class="Mask"><span>Contact</span></span>
</li>
</ul>
</div>
</nav>
<div class="social">
<a href="https://www.instagram.com/superglowcreative" target="_blank">
<i class="fab fa-instagram"></i>
</a>
</div>
<div class="copyright"><span>©2020 SUPERGLOW</span>
</div>
</div>
</div>
</header>尝试使用stopPropagation事件侦听器。
$( ".open" ).scroll(function( event ) {
event.stopPropagation();
});
如果可能的话，尝试将open类添加到正文而不是html