我面临的是滚动，下面将对此进行解释。我仍然在移动网站上工作，还没有进入桌面。画布外菜单是经过修改的版本，具有"显示"效果。
问题
当在移动设备上滚动时，在第一次滑动后，网站"快照"(不应用CSS快照(
- 从上到下滑动时，它几乎会卡到底部。我得刷两次
- 当从下到上滑动时，它会卡到徽标下方。我得刷两次
- 这也会发生在画布外的菜单上，你可以看到我必须滑动两次才能到达底部
我尝试了什么
如果我去掉高度(见下面的代码(，快照问题就会消失，所以向上/向下滑动一次就可以了。
html,
body,
.off-canvas,
.main-body,
.main-container {
height: 100%;
}
但是，这给我的画布外菜单添加了一个问题。当向下滚动菜单时，主体会随之滚动。有没有办法在香草JS中添加一些东西来阻止这种情况的发生？我尝试过一些工作溢出的方法，但没有成功(可能实现错误(。
期望结果
- 能够在一个动作中滑动而不捕捉
- 画布外菜单独立于主容器。因此，当用户在上面滚动时，它会一直滚动到菜单的内容，并且主容器将保持固定，这样当画布外打开时它就不会移动
- https://ASOS.com移动网站的画布外菜单是最好的描述上面的东西。当他们的菜单打开时，你不能在主体上滚动，菜单固定在自己的高度，而不是主容器
在CSS中，我已经注意到"堆栈溢出开始"one_answers"堆栈溢出结束"可能出现的问题。JS位于HTML的最后。避免jquery(希望保持普通JS(。如果JS，我可以实现/修改/删除任何代码，我将不胜感激，因为我对它还很陌生
谢谢！
HTML
<!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>
CSS
*,::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%;
}
试试这个。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;
}
body {
overflow: hidden;
}
我希望这能奏效！