这是我的第一个问题,希望我的英语不会造成阅读困难。
这是我的问题:
鼠标滚动都可以正常工作,但是在移动设备上滑动屏幕时,菜单出现了一些问题。
轻弹屏幕时,整页菜单会折断全高,然后在几秒钟后恢复。
我尝试了很多解决方案,但是都没有用。
这是解决方案的文章:
Flickering when navigating between pages
IOS flicker bug when the css overflow:scroll is changed to overflow:hidden
这是我的网站
www.yamiwork2.icu
菜单代码:
<style>
/**************選單開關新版特效css*/
.hamb {
margin-left: 0px;
margin-top: 0px;
z-index: 6000;
cursor: pointer;
display: inline-block;
}
div.icon {
width: 22px;
height: 1.9px;
background-color: white;
margin: 7px 0;
transition-duration: 0.25s;
transition-timing-function: cubic-bezier(.17, .67, .83, .67);
}
.hamb:hover div.haut {
transform: translateX(5px);
}
.hamb:hover div.mid {
transform: translateX(-5px);
}
.hamb:hover div.bas {
transform: translateX(5px);
}
/**************選單開關新版特效結尾css*/
/********選單overlay**************/
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 1
cursor: pointer;
}
/***********子選單特效************/
.menu ul li:hover > ul li{
opacity: 0;
animation: fadeIn 0.15s ease-in both;
}
.menu ul li:hover > ul li:nth-child(1) {
animation-delay: 0.3s;
}
.menu ul li:hover > ul li:nth-child(2) {
animation-delay: 0.35s;
}
.menu ul li:hover > ul li:nth-child(3) {
animation-delay: 0.4s;
}
.menu ul li:hover > ul li:nth-child(4) {
animation-delay: 0.45s;
}
.menu ul li:hover > ul li:nth-child(5) {
animation-delay: 0.5s;
}
.menu ul li:hover > ul li:nth-child(6) {
animation-delay: 0.55s;
}
.menu ul li:hover > ul li:nth-child(7) {
animation-delay: 0.6s;
}
.menu ul li:hover > ul li:nth-child(8) {
animation-delay: 0.65s;
}
.menu ul li:hover > ul li:nth-child(9) {
animation-delay: 0.7s;
}
.menu ul li:hover > ul li:nth-child(10) {
animation-delay: 0.75s;
}
.menu ul li:hover > ul li:nth-child(11) {
animation-delay: 0.8s;
}
.menu ul li:hover > ul li:nth-child(12) {
animation-delay: 0.85s;
}
.menu ul li:hover > ul li:nth-child(13) {
animation-delay: 0.9s;
}
.menu ul li:hover > ul li:nth-child(14) {
animation-delay: 0.95s;
}
.menu ul li:hover > ul li:nth-child(15) {
animation-delay: 1s;
}
.menu ul li:hover > ul li:nth-child(16) {
animation-delay: 1.05s;
}
.menu ul li:hover > ul li:nth-child(17) {
animation-delay: 1.1s;
}
.menu ul li:hover > ul li:nth-child(18) {
animation-delay: 1.15s;
}
.menu ul li:hover > ul li:nth-child(19) {
animation-delay: 1.2s;
}
.menu ul li:hover > ul li:nth-child(20) {
animation-delay: 1.25s;
}
.menu ul li:hover > ul li:nth-child(21) {
animation-delay: 1.3s;
}
.menu ul li:hover > ul li:nth-child(22) {
animation-delay: 1.35s;
}
.menu ul li:hover > ul li:nth-child(23) {
animation-delay: 1.4s;
}
.menu ul li:hover > ul li:nth-child(24) {
animation-delay: 1.45s;
}
.menu ul li:hover > ul li:nth-child(25) {
animation-delay: 1.5s;
}
.menu ul li:hover > ul li:nth-child(26) {
animation-delay: 1.55s;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translate3d(0, -20%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
/************選單**************/
html, body {
height:100%;
margin:0;
}
#allnav{
font-size: 18px;
line-height: 36px;
padding: 0;
margin: 0;
}
/*開關*/
.menu .closebtn {
position: absolute;
top: 20px;
left:135px;
font-size: 36px;
margin-left: 0px;
display: block;
border: 3px solid transparent;
-webkit-transition: all 0.3s ease-out;
transition: all 0.5s ease-out;
}
@media (min-width:678px) {
.menu .closebtn:hover{
background-color:rgba(255,255,255,0);
transform: scale(1) rotateZ(90deg);
position:absolute;
top:20px;
left:135px;
}
}
.menu {
overflow-x:hidden;
overflow-y:hidden;
position: fixed;
top: 0;
left: -40px;
z-index: 2;
height: 100%;
width: 0px;
transition: 0.5s;
}
.parent-menu {
background-color: white;
min-width: 390px;
float: left;
height: 100%;
overflow-x:hidden;
overflow-y:hidden;
}
.menu ul {
list-style-type: none;
padding:120px 0 0 0;
overflow-y:auto;
}
.menu ul li a {
padding: 20px 15px;
display: block;
color: black;
text-decoration: none;
text-align:center;
font-size:1.250rem;
line-height: 0.909rem;
font-family:Arial;
font-weight:400px;
}
/*********新增hover停留, .dropdown:hover值入li class="dropdown"********/
.menu ul li a:hover, .dropdown:hover {
background-color: #f2f2f2;
}
.menu ul li:hover > ul {
left: 390px;
-webkit-transition: left 200ms ease-in;
-moz-transition: left 300ms ease-in;
-ms-transition: left 300ms ease-in;
transition: left 300ms ease-in;
}
.menu ul li > ul {
position: absolute;
background-color: #f2f2f2;
top: 0;
left: -200px;
min-width: 250px;
z-index: -1;
height: 100%;
-webkit-transition: left 200ms ease-in;
-moz-transition: left 300ms ease-in;
-ms-transition: left 300ms ease-in;
transition: left 300ms ease-in;
}
.menu ul li > ul li a:hover {
background-color: #2e2e2e;
}
.menu ul li b {
padding: 10px 15px;
display: block;
color: black;
text-decoration: none;
font-size: 0.9375rem;
line-height: 20px;
transition: left 2s ease-in;
font-weight:normal;
transition: all 0.1s ease-in;
}
.menu ul li b:hover {
background-color: f2f2f2;
color: #787878;
padding: 10px 20px;
}
.menu ul li c {
font-size: 15px;
line-height: 30px;
display: block;
padding: 0px 20px;
transition: all 0.1s ease-in;
}
.menu ul li c:hover {
background-color: f2f2f2;
color: #787878;
padding: 0 0 0 25px;
}
.menu ul li e {
padding: 10px 15px;
line-height: 25px;
display: block;
color: black;
text-decoration: none;
text-align:center;
font-size:0.9375rem;
margin:0 0 0 -15px;
transition: all 0.1s ease-in;
}
.menu ul li e:hover {
background-color:f2f2f2 ;
color: #787878;
padding: 10px 15px 10px 20px;
}
@media (max-width:678px) {
.parent-menu {
min-width: 200px;
}
.menu ul li:hover > ul {
left: 200px;
}
.menu ul {
padding: 80px 0 0 0;}
.menu ul li b{
font-size: 0.86rem;
}
.menu ul li c {
font-size: 14px;}
.menu ul li a {
font-size: 1.20rem;
line-height: 0.8rem;
text-align: left;
padding: 20px 0px 20px 50px;
}
.menu ul li e {
padding: 10px 0px 10px 69px;
text-align: left;
}
.menu ul li e:hover {
padding: 10px 0px 10px 71px;
}
.menu .closebtn {
left: -5px;
}
.menu ul li > ul {
min-width: 300px;}
}
</style>
<body >
<!--overlay-->
<div id="overlay" onclick="off()"></div>
<div id="allnav" >
<div id="main">
<!--選單開關舊版保留
<span style="font-size:30px;cursor:pointer" onclick="openNav();on()">☰ open</span> -->
<!--選單開關新版特效-->
<div class="hamb" onclick="openNav();on()">
<div class="icon haut"></div>
<div class="icon mid"></div>
<div class="icon bas"></div>
</div>
<!--選單開關新版特效結尾-->
</div>
<nav id ="mynav" class="menu" >
<ul class="parent-menu" >
<li> <a href="javascript:void(0)" class="closebtn" onclick="closeNav();off()">×</a></li>
<li class="dropdown"><a href="#">工商手冊</a>
<ul>
<li><b style="font-weight:900; cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[50]/';">16K系列(280x210mm)</b></li>
<li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[51]/';">基本款</c></li>
<li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[52]';">三折款</c></li>
<li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[53]';">扣帶款</c></li>
<li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[54]';">拉鍊款</c></li>
<li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[37]';">鬆緊帶款</c></li>
<li><b style="font-weight:900; cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[56]/';">25K系列(220x170mm)</b></li>
<li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[57]/';">基本款</c></li>
<li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[58]/';">三折款</c></li>
<li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[59]/';">扣帶款</c></li>
<li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[60]/';">拉鍊款</c></li>
<li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[61]';">鬆緊帶款</c></li>
<li><b style="font-weight:900; cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[62]/';">32K系列(180x130mm)</b></li>
<li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[63]/';">基本款</c></li>
<li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[64]/';">三折款</c></li>
<li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[65]/';">扣帶款</c></li>
<li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[66]/';">拉鍊款</c></li>
<li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[67]';">鬆緊帶款</c></li>
<li><b style="font-weight:900; cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[68]/';">48K系列(180x90mm)</b></li>
<li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[69]/';">基本款</c></li>
<li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[70]/';">三折款</c></li>
<li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[71]/';">扣帶款</c></li>
<li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[72]/';">拉鍊款</c></li>
<li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[73]';">鬆緊帶款</c></li>
<br>
<li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/notebook/?filters=product_cat[48]';">探索所有系列</b></li>
</ul>
</li>
<li class="dropdown"><a href="#">皮件製品</a>
<ul>
<li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%E7%9A%AE%E4%BB%B6%E8%A3%BD%E5%93%81/?filters=product_cat[75]/';">交屋/交車手冊</b></li>
<li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%E7%9A%AE%E4%BB%B6%E8%A3%BD%E5%93%81/?filters=product_cat[76]/';">行李吊牌/護照夾</b></li>
<li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%E7%9A%AE%E4%BB%B6%E8%A3%BD%E5%93%81/?filters=product_cat[77]/';">名片-信用卡-證件套</b></li>
<li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%E7%9A%AE%E4%BB%B6%E8%A3%BD%E5%93%81/?filters=product_cat[78]/';">車控套/鑰匙包</b></li>
<li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%E7%9A%AE%E4%BB%B6%E8%A3%BD%E5%93%81/?filters=product_cat[79]/';">長短夾/手拿/零錢包</b></li>
<li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%E7%9A%AE%E4%BB%B6%E8%A3%BD%E5%93%81/?filters=product_cat[81]/';">水洗牛皮紙</b></li>
<br>
<li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%9a%ae%e4%bb%b6%e8%a3%bd%e5%93%81/';">探索所有系列</b></li>
</ul></li>
<li class="dropdown"><a href="#">環保提袋</a>
<ul>
<li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%92%b0%e4%bf%9d%e6%8f%90%e8%a2%8b/?filters=product_cat[83]/';">立體袋</b></li>
<li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%92%b0%e4%bf%9d%e6%8f%90%e8%a2%8b/?filters=product_cat[84/]';">T型袋</b></li>
<li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%92%b0%e4%bf%9d%e6%8f%90%e8%a2%8b/?filters=product_cat[85]/';">平面袋</b></li>
<li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%92%b0%e4%bf%9d%e6%8f%90%e8%a2%8b/?filters=product_cat[86]/';">打孔袋</b></li>
<li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%92%b0%e4%bf%9d%e6%8f%90%e8%a2%8b/?filters=product_cat[88]/';">束口袋</b></li>
<li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%92%b0%e4%bf%9d%e6%8f%90%e8%a2%8b/?filters=product_cat[89]/';">防塵袋</b></li>
<li><b href="#">網袋</b></li>
<li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%92%b0%e4%bf%9d%e6%8f%90%e8%a2%8b/?filters=product_cat[91]/';">摺疊收納袋</b></li>
<li><b href="#">毛氈布袋</b></li>
<li><b href="#">飲料提袋</b></li>
<br>
<li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%E7%92%B0%E4%BF%9D%E6%8F%90%E8%A2%8B/';">探索所有系列</b></li>
</ul></li>
<li class="dropdown"><a href="#">紙品印刷</a>
<ul>
<li><b style="font-weight:900; cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%b4%99%e5%93%81%e5%8d%b0%e5%88%b7/%e9%86%ab%e7%99%82%e9%99%a2%e6%89%80-%e5%90%8d%e7%89%87%e7%89%88%e5%9e%8b/';">醫療院所-名片版型</b></li>
<li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%b4%99%e5%93%81%e5%8d%b0%e5%88%b7/%e9%86%ab%e7%99%82%e9%99%a2%e6%89%80-%e5%90%8d%e7%89%87%e7%89%88%e5%9e%8b/?filters=product_cat[96]/';">小兒科</c></li>
<li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%b4%99%e5%93%81%e5%8d%b0%e5%88%b7/%e9%86%ab%e7%99%82%e9%99%a2%e6%89%80-%e5%90%8d%e7%89%87%e7%89%88%e5%9e%8b/?filters=product_cat[97]/';">中醫</c></li>
<li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%b4%99%e5%93%81%e5%8d%b0%e5%88%b7/%e9%86%ab%e7%99%82%e9%99%a2%e6%89%80-%e5%90%8d%e7%89%87%e7%89%88%e5%9e%8b/?filters=product_cat[98]/';">牙科</c></li>
<li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%b4%99%e5%93%81%e5%8d%b0%e5%88%b7/%e9%86%ab%e7%99%82%e9%99%a2%e6%89%80-%e5%90%8d%e7%89%87%e7%89%88%e5%9e%8b/?filters=product_cat[99]/';">外科</c></li>
<li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%b4%99%e5%93%81%e5%8d%b0%e5%88%b7/%e9%86%ab%e7%99%82%e9%99%a2%e6%89%80-%e5%90%8d%e7%89%87%e7%89%88%e5%9e%8b/?filters=product_cat[100]/';">耳鼻喉科</c></li>
<li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%b4%99%e5%93%81%e5%8d%b0%e5%88%b7/%e9%86%ab%e7%99%82%e9%99%a2%e6%89%80-%e5%90%8d%e7%89%87%e7%89%88%e5%9e%8b/?filters=product_cat[101]/';">婦產科</c></li>
<li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%b4%99%e5%93%81%e5%8d%b0%e5%88%b7/%e9%86%ab%e7%99%82%e9%99%a2%e6%89%80-%e5%90%8d%e7%89%87%e7%89%88%e5%9e%8b/?filters=product_cat[102]/';">眼科</c></li>
<li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%b4%99%e5%93%81%e5%8d%b0%e5%88%b7/%e9%86%ab%e7%99%82%e9%99%a2%e6%89%80-%e5%90%8d%e7%89%87%e7%89%88%e5%9e%8b/?filters=product_cat[103]/';">復健科</c></li>
<li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%b4%99%e5%93%81%e5%8d%b0%e5%88%b7/%e9%86%ab%e7%99%82%e9%99%a2%e6%89%80-%e5%90%8d%e7%89%87%e7%89%88%e5%9e%8b/?filters=product_cat[104]/';">診所醫院</c></li>
<li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%b4%99%e5%93%81%e5%8d%b0%e5%88%b7/%e9%86%ab%e7%99%82%e9%99%a2%e6%89%80-%e5%90%8d%e7%89%87%e7%89%88%e5%9e%8b/?filters=product_cat[105]/';">藥局</c></li>
<li><c style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%b4%99%e5%93%81%e5%8d%b0%e5%88%b7/%e9%86%ab%e7%99%82%e9%99%a2%e6%89%80-%e5%90%8d%e7%89%87%e7%89%88%e5%9e%8b/?filters=product_cat[106]/';">醫美</c></li>
<br>
<li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/product-category/%e7%b4%99%e5%93%81%e5%8d%b0%e5%88%b7/';">探索所有系列</b></li>
</ul>
</li>
<li class="dropdown"><a href="#">產品資訊</a>
<ul>
<li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/leather/';">皮紋介紹</b></li>
<li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/applications/';">應用實例</b></li>
<li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/custom/';">客製化流程</b></li>
<li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/knowledge/';">知識小百科</b></li>
</ul>
</li>
<li class="dropdown"><a href="#">關於贊洋</a>
<ul>
<li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/brandspirit/';">品牌精神</b></li>
<li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/about-us/';">公司介紹</b></li>
<li><b style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/history/';">歷史紀事</b></li>
<li><b href="#">item</b></li>
</ul>
</li>
<br>
<li><e style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/request-quote/';">如何詢價</e>
</li>
<li><e style="cursor:pointer;" onclick="location.href='http://yamiwork2.icu/contact-us/';">聯絡客服</e>
</li>
</ul>
</nav>
</div>
<script>
/*選單開關*/
function openNav() {
document.getElementById("mynav").style.width = "660px";
}
function closeNav() {
document.getElementById("mynav").style.width = "0";
}
/*overlay開關*/
function on() {
document.getElementById("overlay").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
document.getElementById("mynav").style.width = "0";
}
</script>