如何解决“overfow-x:隐藏”在移动设备上不起作用
我有一个问题,overflow-x: hidden
无法在移动设备上运行。
我的 HTML
代码如下所示。
<div class = "topbar">
<div class="navbar-brand float-left">
<a href="#"><img src="assets/img/logo.png"></a>
</div>
<div class="float-right mr-4 menu-bar">
<a href="#about"><span class="a-border" onclick="menuclick(this)">ABOUT US</span></a>
<a href="#creater"><span class="a-border" onclick="menuclick(this)">CREATERS</span></a>
<a href="#news"><span class="a-border" onclick="menuclick(this)">NEWS</span></a>
<a href="#contact"><span class="a-border" onclick="menuclick(this)">CONTACT</span></a>
</div>
<div class="dropdown-btn">
<div class="menu_btn" onclick="event.stopPropagation(); myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="myDropdown" class="dropdown-content">
<a href="#about"><span class="a-border" onclick="menuclick(this)">ABOUT US</span></a>
<a href="#creater"><span class="a-border" onclick="menuclick(this)">CREATERS</span></a>
<a href="#news"><span class="a-border" onclick="menuclick(this)">NEWS</span></a>
<a href="#contact"><span class="a-border" onclick="menuclick(this)">CONTACT</span></a>
</div>
</div>
<div class="menu-img"><img src="assets/img/menu-img.png"></div>
</div>
我的 css 如下。
.topbar {
width: 100%;
background-color: black;
color: white;
margin: 0px;
padding: 3rem;
position: relative;
}
a {
text-decoration: none;
}
a:hover {
cursor: pointer;
}
.a-border {
display: inline-block;
position: relative;
color: white;
padding: 0.5rem 0.25rem;
margin: 0 1.5rem;
overflow: hidden;
}
.a-border::after {
content: url("../img/more-btn-bottom.png");
display: block;
position: absolute;
bottom: 0;
left: -0.25rem;
border: none;
transform: scale(0,1);
transform-origin: 0% 100%;
transition: transform 0.4s;
}
a:hover .a-border::after {
transform:scale(1,1);
}
a.focused .a-border::after {
transform: none;
}
.menu-bar {
z-index: 3;
}
.menu-btn {
display: inline-block;
cursor: pointer;
z-index: 3;
}
.bar1,.bar2,.bar3 {
width: 35px;
height: 5px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px,6px);
transform: rotate(-45deg) translate(-9px,6px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px,-8px);
transform: rotate(45deg) translate(-8px,-8px);
}
.dropdown-btn {
position: relative;
display: inline-block;
z-index: 3;
}
.dropdown-content {
display: none;
position: absolute;
right: 20px;
background-color: #343a40;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0.2);
z-index: 1000;
}
.show {display: block;}
@media screen and (min-width: 780px) {
.menu-bar {
display: block;
}
.dropdown-btn {
display: none;
}
}
@media screen and (max-width: 779px){
.menu-bar {
display: none;
}
.dropdown-btn {
display: block;
}
}
.menu-img {
position: fixed;
top: 0;
right: -5rem;
}
我是这样试的。
body {
overflow-x: hidden;
}
我再次尝试这样做。
html {
overflow-x: hidden;
}
以上代码无效。
如果我喜欢这个,它就有效。
topbar {
overflow-x: hidden;
}
但问题是下拉菜单也隐藏了。
我想解决这个问题。
我想隐藏 overflown image
,但显示 dropdown menu
。
解决方法
我是这样试的。
<div class = "topbar">
<div class="navbar-brand float-left">
<a href="#"><img src="assets/img/logo.png"></a>
</div>
<div class="float-right mr-4 menu-bar">
<a href="#about"><span class="a-border" onclick="menuclick(this)">ABOUT US</span></a>
<a href="#creater"><span class="a-border" onclick="menuclick(this)">CREATERS</span></a>
<a href="#news"><span class="a-border" onclick="menuclick(this)">NEWS</span></a>
<a href="#contact"><span class="a-border" onclick="menuclick(this)">CONTACT</span></a>
</div>
<div class="dropdown-btn">
<div class="menu_btn" onclick="event.stopPropagation(); myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="myDropdown" class="dropdown-content">
<a href="#about"><span class="a-border" onclick="menuclick(this)">ABOUT US</span></a>
<a href="#creater"><span class="a-border" onclick="menuclick(this)">CREATERS</span></a>
<a href="#news"><span class="a-border" onclick="menuclick(this)">NEWS</span></a>
<a href="#contact"><span class="a-border" onclick="menuclick(this)">CONTACT</span></a>
</div>
</div>
<div class="menu-img"></div>
</div>
css
.menu-img {
background-image: url("assets/img/menu-img.png");
background-size: 100% 100%;
position: fixed;
top: 0;
right: -5rem;
}
我认为img不能隐藏,但背景图片可以隐藏。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。