怎么判断子元素距离父元素顶部位置_js获取元素的距离父元素、窗口的距离offsetTop,offsetHeight,clientHeight...

前言

相信很多项目中都会有这样一个小需求(PC端,移动端则是点击),鼠标移上某个菜单或者某个位置,显示一个弹出框,移开则隐藏弹出框,就是css中hover效果,这种通常做法是每个子菜单下都有一个弹框,父元素相对定位,子元素绝对定位,只需要控制的弹框的显示与隐藏即可,但是,当鼠标移动到边界的菜单上时,弹框可能会超出外部元素的范围,如下图:

解决办法

动态的计算弹框距离外部元素的位置,即获取元素的offsetLeft、offsetTop、offsetWidth、offsetHeight,如果弹框的宽度(offsetWidth)+距离左边的距离(offsetLeft)大于父元素的宽度,则判断为超出外部元素范围,需要动态改变弹框距离边框的位置

下面是对offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop图解

注意,这里对弹框的布局有限制,虽然弹框要隐藏,但是不能使用display:none的方式隐藏,可以使用opacity:0或者visibility: hidden隐藏元素,因为display:none方式不能获取到元素的高度,宽度等

下面是我写的一个demo

Title

#box {

width: 500px;

height: 500px;

background: #0a67fb;

margin: 100px auto;

position: relative;

}

#inner-box {

width: 200px;

height: 200px;

background: #00F7DE;

position: absolute;

top: 50px;

left: 320px;

visibility: hidden;

}

var box = document.querySelector('#box');

var innerbox = document.querySelector('#inner-box');

box.onmouseenter = function (e) {

var wrapperBoxWidth = box.offsetWidth;// 获取父容器宽度

var wrapperBoxHeight = box.offsetHeight;// 获取父容器高度

var innerBoxWidth = innerbox.offsetWidth;// 获取弹框宽度

var innerBoxHeight = innerbox.offsetHeight;// 获取弹框高度

var innerBoxLeft = innerbox.offsetLeft;// 获取弹框距离左侧宽度

var innerBoxTop = innerbox.offsetTop;// 获取弹框距离顶部高度

innerbox.style.visibility = 'visible' // 鼠标移入时显示弹框

// 如果弹框宽度+距离左侧宽度大于外部元素的宽度,则右侧溢出

if (innerBoxLeft + innerBoxWidth > wrapperBoxWidth) {

innerbox.style.left = 'auto'

innerbox.style.right = '10px'

}

// 如果弹框高度+距离顶部高度大于外部元素的高度,则底部溢出

if (innerBoxTop + innerBoxHeight > wrapperBoxHeight) {

innerbox.style.top = 'auto'

innerbox.style.bottom = '10px'

}

}

box.onmouseleave = function () {

innerbox.style.visibility = 'hidden' // 鼠标移开时隐藏弹框

}

以上代码亲测可以解决弹框溢出问题,如果道友有更好的解决办法,欢迎指出,不胜感激!!!

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值