如何解决如何防止绝对定位的弹出窗口从其容器中裁剪出来?
function myclick() {
let node = document.createElement("div");
node.className = "popover";
node.innerText = "hello world hello world";
event.srcElement.appendChild(node);
}
.container {
width: 230px;
height: 200px;
border: 1px solid #ddd;
display: flex;
flex-flow: wrap;
}
.tag {
border: 1px solid #ddd;
padding: 5px;
margin: 5px;
display: flex;
height: 20px;
position: relative;
}
.popover {
position: absolute;
top: 30px;
width: 60px;
left: 0px;
background-color: #dfdfdf;
}
<div class="container">
<div class="tag" onclick="myclick();">apple</div>
<div class="tag" onclick="myclick();">banana</div>
<div class="tag" onclick="myclick();">carrot</div>
<div class="tag" onclick="myclick();">dog</div>
<div class="tag" onclick="myclick();">elephant</div>
<div class="tag" onclick="myclick();">firetruck</div>
</div>
我已经完全复制了上面遇到的问题。基本上,当您单击标签时,我会从标签中看到弹出窗口。除了标签靠近容器边缘的情况以外,所有其他方法都可以正常工作。在这种情况下,标签会从容器中剪出。在提供的示例中,如果您单击“ dog”,则弹出框剪辑将位于container
div之外。
相反,我希望弹出窗口尽可能向左移动,以防止其自身从容器中剪出。我已经把它弄乱了一段时间,但我不太想知道如何做到这一点。
解决方法
已编辑:您可以计算标签的正确位置并检查弹出窗口是否有足够的空间。将参数添加到myclick
并传递元素。
var popUpWidth = 60;
var containerWidth = 200;
function myclick(element) {
let node = document.createElement("div");
if(element.offsetLeft + popUpWidth > containerWidth){
node.style.left = -20 + "px";
}
node.className = "popover";
node.innerText = "hello world hello world";
event.srcElement.appendChild(node);
}
片段:
var popUpWidth = 60;
var containerWidth = 200;
function myclick(element) {
let node = document.createElement("div");
if(element.offsetLeft + popUpWidth > containerWidth){
node.style.left = -20 + "px";
}
node.className = "popover";
node.innerText = "hello world hello world";
event.srcElement.appendChild(node);
}
.container {
width: 230px;
height: 200px;
border: 1px solid #ddd;
display: flex;
flex-flow: wrap;
}
.tag {
border: 1px solid #ddd;
padding: 5px;
margin: 5px;
display: flex;
height: 20px;
position: relative;
}
.popover {
position: absolute;
top: 30px;
width: 60px;
left: 0px;
background-color: #dfdfdf;
}
<div class="container">
<div class="tag" onclick="myclick(this);">apple</div>
<div class="tag" onclick="myclick(this);">banana</div>
<div class="tag" onclick="myclick(this);">carrot</div>
<div class="tag" onclick="myclick(this);">dog</div>
<div class="tag" onclick="myclick(this);">elephant</div>
<div class="tag" onclick="myclick(this);">firetruck</div>
</div>
,
您可以尝试一下。我添加了一个名为onEdge
的javascript函数,用于检测子元素与边缘的距离。可能需要根据您的需要进行修改(例如,设置您认为“太靠近”的距离父母边缘的距离)。
function onEdge(child) {
if (child.parentElement.offsetWidth < (child.offsetLeft + child.offsetWidth))
return true;
return false;
}
function myclick(elm) {
var addClass = onEdge(elm);
let node = document.createElement("div");
node.className = "popover" + (addClass ? " right" : "");
node.innerText = "hello world hello world";
event.srcElement.appendChild(node);
}
.container {
width: 230px;
height: 200px;
border: 1px solid #ddd;
display: flex;
flex-flow: wrap;
}
.tag {
border: 1px solid #ddd;
padding: 5px;
margin: 5px;
display: flex;
height: 20px;
position: relative;
}
.popover {
position: absolute;
top: 30px;
width: 60px;
left: 0px;
background-color: #dfdfdf;
}
.popover.right {
left: auto;
right: 0;
}
<div id="tag-container" class="container">
<div class="tag" onclick="myclick(this);">apple</div>
<div class="tag" onclick="myclick(this);">banana</div>
<div class="tag" onclick="myclick(this);">carrot</div>
<div class="tag" onclick="myclick(this);">dog</div>
<div class="tag" onclick="myclick(this);">elephant</div>
<div class="tag" onclick="myclick(this);">firetruck</div>
</div>
,
只需稍微降低左侧位置:
.popover {
position: absolute;
top: 30px;
width: 60px;
left: -19px;
background-color: #dfdfdf;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。