正在删除水平滚动条
Removing horizontal scrollbar
在下面的jsfiddle中,有两个按钮可以打开屏幕左侧或右侧的菜单div。
当菜单打开时,站点的其余部分(我使用的是htmldiv(也随之移动。
我的问题是,当打开左侧菜单时,htmldiv会左右滚动,而当打开右侧菜单时则不会。
我不知道为什么会这样,但如果可能的话,我想删除从左到右的滚动,而不添加overflow:hidden
,因为那样我也会失去上下滚动的能力。
https://jsfiddle.net/8nj5y4t1/62/
我的代码如下:
HTML:
<header class="header">
<span id="button-one"></span>
<span id="button-two"></span>
<div class="push-menu-one"></div>
<div class="push-menu-two"></div>
<div class="overlay"></div>
</header>
<div class="content"></div>
<footer class="footer"></footer>
CSS:
html {
position:relative;
height:100%;
left:0;
right:0;
background-color:pink;
-webkit-transition: all .6s cubic-bezier(.645,.045,.355,1);
transition: all .6s cubic-bezier(.645,.045,.355,1);
}
body {
min-height:100%;
margin:0;
padding:0;
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.header {
height:70px;
width:100%;
background-color:white;
}
.content {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
width:85%;
margin-top:50px;
margin-left:auto;
margin-right:auto;
}
.footer {
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: auto;
width: 100%;
padding: 10px 0 10px 0;
background-color: #efefef;
}
/* PUSH MENUS */
#button-one {
display:inline-block;
width:30px;
height:30px;
margin:20px;
background-color:green;
cursor:pointer;
}
#button-two {
display:inline-block;
float:right;
width:30px;
height:30px;
margin:20px;
background-color:orange;
cursor:pointer;
}
.push-menu-one {
position:fixed;
top:0px;
left:-295px;
width:295px;
height:100%;
margin:0;
padding:0;
background-color:wheat;
-webkit-transition: all .6s cubic-bezier(.645,.045,.355,1);
transition: all .6s cubic-bezier(.645,.045,.355,1);
}
.push-menu-two {
position:fixed;
top:0px;
right:-295px;
width:295px;
height:100%;
margin:0;
padding:0;
background-color:darkred;
-webkit-transition: all .6s cubic-bezier(.645,.045,.355,1);
transition: all .6s cubic-bezier(.645,.045,.355,1);
}
.overlay {
position:fixed;
z-index:9;
top:0px;
left:0px;
width:0px;
height:0px;
background-color:#000000;
opacity:0;
transition: opacity 1s, width 0s ease 1s, height 0s ease 1s;
}
.overlay.open-right,
.overlay.open-left {
width:100%;
height:100%;
opacity:0.4;
transition: opacity 1s;
}
/* TOGGLE CLASSES */
html.open-left {
left:295px;
}
.push-menu-one.open-left {
left:0;
}
html.open-right {
left:-295px;
}
.push-menu-two.open-right {
right:0;
}
jQuery:
jQuery(document).ready(function($) {
$('#button-one').click(function() {
$('html, .overlay, .push-menu-one').toggleClass('open-left');
});
$('#button-two').click(function() {
$('html, .overlay, .push-menu-two').toggleClass('open-right');
});
$('.overlay').click(function() {
$('html, .overlay, .push-menu-one, .push-menu-two').removeClass('open-left');
$('html, .overlay, .push-menu-one, .push-menu-two').removeClass('open-right');
});
});
html, body {
overflow-x: hidden;
}
编辑
来自评论:
你知道为什么当左侧菜单打开时滚动只影响html/body吗?看起来很奇怪,它在右边没有做同样的事情。
想想内容的流动。
在从左到右的语言模式中,内容会溢出到右侧。它不会向左溢出。
因此,滚动(CSS中overflow
的一个函数(不适用于左侧,因为没有溢出。
在从右到左的语言中,情况正好相反。
您可以将内容切换到RTL模式–具有CSS direction
属性或HTML CCD_;在LTR语言中启用RTL滚动(但这是一个破解,可能会变得一团糟(。
来自规范:
111.1.1溢出:
overflow
属性此属性指定块容器元素的内容在溢出元素的框时被剪裁。
同样,在LTR读/写模式下,内容不会向左溢出。
通常,调用overflow
属性滚动到视口左侧是很常见的,这只是因为overflow
通常与滚动条相关联。但实际上,这样的请求是专门的滚动,与overflow
无关。以JS/jQuery为例。
相关文章:
- html表格的浮动水平滚动条
- visjs时间线的水平滚动条
- 如何使用angularjs在空剑道网格中显示水平滚动条
- 如何强制HTML页面具有水平滚动条
- 当我将水平滚动条移到最左边时,垂直滚动条不可见
- AngularJS-将图像的水平滚动条居中
- jQuery自定义滚动条插件没有't使用水平滚动进行更新:true
- 如何制作具有鼠标悬停效果的水平滚动条
- 当任何块级元素的视口较窄时,添加水平滚动条
- 数据表 Javascript 显示水平滚动条
- jQuery 获取文档宽度和高度,不包括水平/垂直滚动条
- 如何在具有固定宽度和水平滚动条的容器中具有高图表图表
- javascript Y 滚动条在向下按钮的鼠标上移动,但窗口水平
- 如何在不向下转到页面的情况下显示水平滚动条
- 在没有jQuery的情况下更改水平滚动条的起始位置
- 水平滚动选项卡,没有滚动条
- 没有水平滚动条的 Jquery 图像动画
- 破解以在滚动条出现时保持水平元素位置
- 水平滚轮滚动条问题
- 自定义滚动条中的自定义滚动条(水平)(垂直)