防止屏幕外的div调整大小
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了防止屏幕外的div调整大小相关的知识，希望对你有一定的参考价值。
我有一个抽屉菜单，单击按钮后会显示在屏幕上。使用绝对定位的过渡有些滞后，所以我使用了translate3d。菜单有两种宽度。其中一个是移动设备视图的100％，一个600px以上的视口是395px。我注意到的一个怪癖是，如果我要调整屏幕尺寸，菜单将巧妙地出现。发生这种情况时，是否有办法使菜单完全不显示在屏幕上？
注意：要查看此内容，请将片段放大到全屏并水平调整为600px或更小。您应该看到div出现，然后返回屏幕外。
$('button').on('click', function() {
$('#drawer').toggleClass('active');
});html,
body {
height: 100%;
margin: 0;
}
#drawer {
width: 100%;
height: 100%;
background-color: grey;
transition: transform .5s ease-in;
transform: translate3d(-100%, 0, 0);
}
#drawer.active {
transform: translate3d(0, 0, 0);
}
@media (min-width: 600px) {
#drawer {
transform: translate3d(-395px, 0, 0);
width: 395px;
}
}
button {
position: absolute;
top: 10px;
left: 10px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="drawer"></div>
<button>Toggle Drawer</button>答案
在放置抽屉absolute之外，诀窍是使其宽度偏移left 负，并在3D变换中将x轴的原点开始为0。在活动状态下，transform3d属性将是抽屉的宽度，以使其回到窗口的可见部分。
$('button').on('click', function() {
$('#drawer').toggleClass('active');
});html,
body {
height: 100%;
margin: 0;
}
#drawer {
width: 100%;
height: 100%;
position: absolute;
left: -100%;
background-color: grey;
transition: transform .5s ease-in;
transform: translate3d(0,0,0);
}
#drawer.active {
transform: translate3d(100%, 0, 0);
}
@media (min-width: 600px) {
#drawer {
left: -395px;
width: 395px;
}
#drawer.active {
transform: translate3d(395px, 0, 0);
}
}
button {
position: absolute;
top: 10px;
left: 10px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="drawer"></div>
<button>Toggle Drawer</button>以上是关于防止屏幕外的div调整大小的主要内容，如果未能解决你的问题，请参考以下文章
通过 SetPixel 设置的 C++ 像素在调整控制台大小或将其移出屏幕时消失
如何设置包装 div 的高度以防止响应式滑块/自动收录器后内容跳转？
通过调整控制台大小或将其移出屏幕时，通过SetPixel设置的C ++像素正在消失