我正面临着滚动，下面将对此进行说明。我仍在移动网站上工作，尚未将其安装到桌面上。画布外菜单是this的修改版本，具有“显示”效果。
问题
在移动设备上滚动时，在第一次滑动动作后，网站“快照”（未应用CSS捕捉）
我尝试过的事情
如果我取消了高度（请参见下面的代码），则捕捉问题将消失，因此向上/向下滑动一次将毫无问题。
html,
body,
.off-canvas,
.main-body,
.main-container {
height: 100%;
}
但是，这现在增加了我的画布菜单问题。向下滚动菜单时，主体将随之滚动。有没有办法在香草JS中添加一些东西来阻止这种情况的发生？我尝试了一些工作溢出的方法，但是没有运气（可能实现有误）。
所需结果
在CSS中，我记下了“堆栈溢出开始”和“堆栈溢出结束”可能出在哪里。 JS位于HTML的末尾。避免使用jquery（希望保留在普通JS上）。如果我还不熟悉JS，将不胜感激我可以实现/修改/删除的任何代码
谢谢！
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Site</title>
<link rel="stylesheet" type="text/css" href="css/custom.css" />
</head>
<body>
<style>
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Quicksand'),
url('../fonts/Quicksand-Regular.woff2') format('woff2');
}
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 600;
font-display: swap;
src: local('Quicksand-SemiBold'),
url('../fonts/Quicksand-SemiBold.woff2') format('woff2');
}
body {
font-family: 'Quicksand', Fallback, sans-serif;
}
</style>
<div id="off-canvas" class="off-canvas">
<nav class="oc-menu oc-effect">
<h2>Sidebar</h2>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a></li>
<li><a href="#">Item 8</a></li>
<li><a href="#">Item 9</a></li>
<li><a href="#">Item 10</a></li>
<li><a href="#">Item 11</a></li>
<li><a href="#">Item 12</a></li>
<li><a href="#">Item 13</a></li>
</ul>
</nav>
<div class="main-body">
<div class="main-container">
<!-- NAVBAR -->
<header>
<div class="navbar">
<div class="logo">
<h4>Site</h4>
</div>
<div class="header-icons">
<div class="basket">
<img src="img/shopping-cart.svg" alt="shopping cart image" draggable="false" class="basket-img">
<p class="basket-text">Basket</p>
</div>
<div class="hamburger">
<img src="img/hamburger.svg" alt="hamburger menu" draggable="false" class="hamb" data-effect="oc-effect">
<p class="hamburger-menu" data-effect="oc-effect">Menu</p>
</div>
</div>
</div>
<!-- Search Form Top -->
<div class="sft">
<form role="search" class="sft-form">
<span class="sft-search-svg">
<svg width="13pt" height="13pt" version="1.1" viewBox="-1 0 136 136.22" xmlns="http://www.w3.org/2000/svg"><path d="m93.148 80.832c16.352-23.09 10.883-55.062-12.207-71.41s-55.062-10.883-71.41 12.211c-16.348 23.09-10.883 55.059 12.211 71.406 16.48 11.668 38.27 12.566 55.652 2.3008l37.77 37.543c4.0781 4.293 10.863 4.4648 15.156 0.38672 4.293-4.0742 4.4648-10.859 0.39063-15.152-0.12891-0.13672-0.25391-0.26172-0.39063-0.39063zm-41.84 3.5c-18.246 0.003907-33.039-14.777-33.051-33.023-0.003906-18.246 14.777-33.039 33.027-33.047 18.223-0.007813 33.008 14.75 33.043 32.973 0.03125 18.25-14.742 33.066-32.996 33.098h-0.023437z"/>
</svg>
</span>
<input type="search" name="q" class="sft-input" placeholder="Search For..." aria-label="Search through site content" autocomplete="off">
<button class="sft-btn">Search</button>
</form>
</div>
<div class="sm">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
<a href="#">Item 4</a>
<a href="#">Item 5</a>
<a href="#">Item 6</a>
<a href="#">Item 7</a>
<a href="#">Item 8</a>
</div>
</header>
<main>
</main>
<!-- Footer -->
<footer>
<div class="footer-logo_1">
<h1>Site</h1>
</div>
<hr>
<div class="footer-nav_2">
<div class="footer-nav-item">Item 1</div>
<div class="footer-nav-item">Item 2</div>
<div class="footer-nav-item">Item 3</div>
<div class="footer-nav-item">Item 4</div>
<div class="footer-nav-item">Item 5</div>
<div class="footer-nav-item">Item 6</div>
<div class="footer-nav-item">Item 7</div>
<div class="footer-nav-item">Item 8</div>
</div>
<hr>
<div class="footer-payment-icons">
<img src="img/Visa.svg" class="footer-payment-icons-img">
<img src="img/Mastercard.svg" class="footer-payment-icons-img">
<img src="img/Amex.svg" class="footer-payment-icons-img">
<img src="temp/PayPal.svg" class="footer-payment-icons-img">
<img src="img/ApplePay.svg" class="footer-payment-icons-img">
<img src="img/GPay.svg" class="footer-payment-icons-img">
</div>
<hr>
<div class="footer-copyright-privacy">
<p style="text-align: center"> Copyright © 2020 - <span style="font-weight: 600;">Site</span></p>
<div class="privacy">
<p>Privacy Policy</p>
<p>Terms & Conditions</p>
<p>Sitemap</p>
</div>
</div>
</footer>
</div>
</div>
</div>
<script>
var click = document.querySelectorAll('.hamb, .testing');
var menu = document.querySelector('#off-canvas');
var pusher = document.querySelector('.main-body');
var effect;
for (var i = 0; i < click.length; i++) {
click[i].addEventListener('click', addClass)
}
pusher.addEventListener('click', closeMenu);
function addClass(e) {
effect = e.target.getAttribute('data-effect');
menu.classList.toggle(effect);
menu.classList.toggle('oc-menu-open');
}
function closeMenu(el) {
if (el.target.classList.contains('main-body')) {
menu.classList.toggle(effect);
menu.classList.toggle('oc-menu-open');
}
}
</script>
</body>
*,::after,::before{box-sizing:border-box},ol[class],ul[class]{padding:0}blockquote,body,dd,dl,figcaption,figure,h1,h2,h3,h4,li,ol[class],p,ul[class]{margin:0}body{min-height:100vh;scroll-behavior:smooth;text-rendering:optimizeSpeed;line-height:1.5;}ol[class],ul[class]{list-style:none}ol,ul{list-style:none;padding-left:0;}a:not([class]){text-decoration-skip-ink:auto}img{max-width:100%;display:block}article>*+*{margin-top:1em}button,input,select,textarea{font:inherit}@media (prefers-reduced-motion:reduce){*{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;scroll-behavior:auto!important}}
textarea,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
.input-checkbox {
-webkit-appearance: none;
}
input, button {
-webkit-appearance: none;
}
/** Stack Overflow Start **/
html,
body,
.off-canvas,
.main-body,
.main-container {
height: 100%;
}
.main-body{
overflow-y: scroll;
background: #fbfbfb;
position: relative;
left: 0;
z-index: 99;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
.main-body::after {
overflow: hidden;
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
background: rgba(0,0,0,0.2);
content: '';
opacity: 0;
-webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}
.off-canvas {
position: relative;
overflow: hidden;
}
.oc-menu-open .main-body::after {
width: 100%;
height: 100%;
opacity: 1;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
overflow: hidden;
}
.oc-menu {
overflow: scroll;
position: absolute;
top: 0;
left: 0;
z-index: 100;
visibility: hidden;
width: 80%;
height: 100%;
background: #663399;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.oc-menu::after {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.2);
content: '';
opacity: 1;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.oc-menu-open .oc-menu::after {
width: 0;
height: 0;
opacity: 0;
-webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}
.oc-menu h2 {
margin: 0;
padding: 1em;
text-shadow: 0 0 1px rgba(0,0,0,0.1);
font-weight: 300;
font-size: 2em;
}
.oc-menu ul li a {
display: block;
padding: 1em 1em 1em 1.2em;
color: inherit;
box-shadow: inset 0 -1px rgba(0,0,0,0.2);
text-transform: uppercase;
text-shadow: 0 0 1px rgba(255,255,255,0.1);
letter-spacing: 1px;
font-weight: 600;
-webkit-transition: background 0.3s, box-shadow 0.3s;
transition: background 0.3s, box-shadow 0.3s;
text-decoration: none;
}
.oc-menu ul li:first-child a {
box-shadow: inset 0 -1px rgba(0,0,0,0.2), inset 0 1px rgba(0,0,0,0.2);
}
.oc-effect.oc-menu-open .main-body {
-webkit-transform: translate3d(80%, 0, 0);
transform: translate3d(80%, 0, 0);
}
.oc-effect.oc-menu {
z-index: 1;
}
.oc-effect.oc-menu-open .oc-effect.oc-menu{
visibility: visible;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
/** Stack Overflow End **/
/*****
Custom Code
******/
body {
color: #fff;
background-color: #663399;
}
/** NavBar **/
header {
background-color: #663399;
}
.navbar {
color: #fff;
padding: 15px 0px;
display: grid;
grid-template-columns: 60% 40%;
}
.logo {
padding-left: 10px;
display: grid;
place-items: center start;
}
.header-icons {
display: grid;
grid-template-columns: 1fr 1fr;
}
.basket, .hamburger {
display: grid;
grid-auto-rows: 1fr;
place-items: center center;
grid-row-gap: px;
}
.basket-img, .hamb, .basket-text, .hamburger-menu {
cursor: pointer;
}
.hamb {
padding: 10px;
margin: -10px;
max-width: 65%;
-webkit-filter: invert(100%); /* safari 6.0 - 9.0 */
filter: invert(100%);
}
.basket-text, .hamburger-menu {
font-size: 12px;
font-weight: 600;
padding: 0.2em;
margin: -0.2em;
}
.sft-form {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
padding: 5px 10px 12.5px 10px;
}
.sft-search-svg, .sft-input, .sft-btn {
height: 40px;
}
.sft-search-svg {
display: grid;
place-items: center center;
-webkit-border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
background-color: #e6e6e6;
border-right: solid 1px #dddddd;
}
.sft-search-svg svg {
margin: 0 8px;
fill: #7D7D8C;
}
.sft-input {
width: 100%;
border: none;
background-color: #e6e6e6;
padding-left: 10px;
-webkit-appearance: none;
border-radius: 0;
}
.sft-input:placeholder-shown {
font-size: 14px;
}
.sft-input:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(21, 156, 228, 0.4);
}
.sft-btn {
background-color: #0BC133;
color: inherit;
font-weight: 600;
border: none;
border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
font-size: 12px;
margin-left: 0;
}
.sft-suggestions {
padding: 5px 7.5px;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
color: #7d7d8c;
font-size: 12px;
}
.sft-sug-item:first-child {
font-weight: bold;
}
/** Scroll Nav **/
.sm {
background-color: #333;
overflow: auto;
white-space: nowrap;
}
.sm a {
display: inline-block;
color: white;
font-weight: 600;
text-align: center;
padding: 14px;
text-decoration: none;
}
.sm a:hover {
background-color: #777;
}
/** Main Content **/
main {
height: 100vh;
}
/** Footer **/
footer {
display: grid;
grid-row-gap: 20px;
background-color: #663399;
text-align: center;
padding: 0 15px;
grid-row-gap: 20px;
}
.footer-logo_1 {
padding-top: 20px;
display: grid;
}
.footer-logo_1 h1 {
font-size: 1.4em;
padding-bottom: 20px;
}
.footer-logo_1 p {
font-size: 14px;
}
/** Footer Nav Links **/
.footer-nav_2 {
padding: 0 5px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-row-gap: 20px;
font-weight: 600;
}
.footer-nav-item {
padding: 2px;
}
/** Footer Payment Icons **/
.footer-payment-icons {
padding: 0 15px;
display: grid;
grid-template-columns: repeat(3, auto);
place-items: center center;
}
.footer-payment-icons-img {
max-width: 70%;
}
/** Footer Copyright **/
.footer-copyright-privacy {
font-size: 14px;
padding-bottom: 20px;
}
/** Footer Privacy **/
.privacy {
font-size: 12px;
display: grid;
grid-template-columns: repeat(3, auto);
grid-column-gap: 7.5px;
color: #d3d3d3;
justify-content: center;
}
/** Temporary **/
hr {
height: 1px;
width: 80%;
}
答案 0 :(得分：0)
尝试一下。 https://codepen.io/KonradLinkowski/pen/zYqNXYx
JavaScript
function addClass(e) {
effect = e.target.getAttribute('data-effect');
menu.classList.toggle(effect);
menu.classList.toggle('oc-menu-open');
document.body.classList.toggle('menu-is-open')
}
function closeMenu(el) {
if (el.target.classList.contains('main-body')) {
menu.classList.toggle(effect);
menu.classList.toggle('oc-menu-open');
document.body.classList.toggle('menu-is-open')
}
}
CSS
.main-body.menu-is-open {
overflow: hidden;
}
答案 1 :(得分：-1)
body {
overflow: hidden;
}
我希望这可行！