摘要：前言相信很多项目中都会有这样一个小需求端，移动端则是点击，鼠标移上某个菜单或者某个位置，显示一个弹出框，移开则隐藏弹出框，就是中效果，这种通常做法是每个子菜单下都有一个弹框，父元素相对定位，子元素绝对定位，只需要控制的弹框的显示与隐藏即可，
前言
相信很多项目中都会有这样一个小需求（PC端，移动端则是点击），鼠标移上某个菜单或者某个位置，显示一个弹出框，移开则隐藏弹出框，就是css中hover效果，这种通常做法是每个子菜单下都有一个弹框，父元素相对定位，子元素绝对定位，只需要控制的弹框的显示与隐藏即可，但是，当鼠标移动到边界的菜单上时，弹框可能会超出外部元素的范围，如下图：
解决办法 动态的计算弹框距离外部元素的位置，即获取元素的offsetLeft、offsetTop、offsetWidth、offsetHeight，如果弹框的宽度（offsetWidth）+距离左边的距离（offsetLeft）大于父元素的宽度，则判断为超出外部元素范围，需要动态改变弹框距离边框的位置 下面是对offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop图解 注意，这里对弹框的布局有限制，虽然弹框要隐藏，但是不能使用display:none的方式隐藏，可以使用opacity:0或者visibility: hidden隐藏元素，因为display:none方式不能获取到元素的高度，宽度等 下面是我写的一个demo
Title
以上代码亲测可以解决弹框溢出问题，如果道友有更好的解决办法，欢迎指出，不胜感激！！！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115999.html
摘要：前言相信很多项目中都会有这样一个小需求端，移动端则是点击，鼠标移上某个菜单或者某个位置，显示一个弹出框，移开则隐藏弹出框，就是中效果，这种通常做法是每个子菜单下都有一个弹框，父元素相对定位，子元素绝对定位，只需要控制的弹框的显示与隐藏即可， 前言 相信很多项目中都会有这样一个小需求（PC端，移动端则是点击），鼠标移上某个菜单或者某个位置，显示一个弹出框，移开则隐藏弹出框，就是css中h...
摘要：前言相信很多项目中都会有这样一个小需求端，移动端则是点击，鼠标移上某个菜单或者某个位置，显示一个弹出框，移开则隐藏弹出框，就是中效果，这种通常做法是每个子菜单下都有一个弹框，父元素相对定位，子元素绝对定位，只需要控制的弹框的显示与隐藏即可， 前言 相信很多项目中都会有这样一个小需求（PC端，移动端则是点击），鼠标移上某个菜单或者某个位置，显示一个弹出框，移开则隐藏弹出框，就是css中h...
摘要：包括和属性是可以赋值的，并且会立即自动滚动网页到相应位置，因此可以利用它们改变网页元素的相对位置。另外，方法也有类似作用，可以使网页元素出现在浏览器窗口的左上角。网页元素的位置那就是使用方法。就是透过浏览器看内容的这个区域高度。 获取网页的大小 一张网页的全部面积，就是它的大小，通常是由内容和css样式表决定的。浏览器窗口的大小，是在浏览器中看到的那部分网页面积。又叫做viewport...
摘要：鼠标事件中的各种距离鼠标事件很多，不过每个事件中关于距离的属性含义是一样的，这里用来讲解，具体的内容会在不久之后写到了事件部分讲解。 js中有很多距离，为了不会混淆这里总结一下其中部分距离 本文包括元素属性相关的距离和鼠标事件中的距离，废话不多说，进入正文 先补充一下，本文的测试环境如下： Chrome Dev 54.0.2840.71Firefox 49.0Opera 41.0Saf...
阅读 638·2023-04-25 20:18
阅读 1896·2021-11-22 13:54
阅读 1056·2021-11-15 11:37
阅读 2328·2021-09-26 09:55
阅读 3487·2021-09-22 15:28
阅读 2751·2021-09-03 10:34
阅读 1556·2021-07-28 00:15
阅读 1395·2019-08-30 14:25
