关于正文溢出的 JavaScript

JavaScript on body overflow?

本文关键字:溢出 JavaScript 正文 于正文      更新时间:2023-09-26

我在我的网站上创建了一个上下文菜单,右键单击时会显示。在该上下文菜单中,我有一些子菜单将出现在菜单的正确站点上。

现在的问题是,如果您调用页面右侧的上下文菜单,则没有足够的空间来显示子菜单,并且浏览器会添加水平滚动条。

如果浏览器中没有足够的空间,是否有任何 JavaScript 命令或其他可以更改 CSS 中子菜单的位置?

您可以在

JsBin 上实时找到您可以执行的操作的草稿

您可以轻松获取鼠标的位置并再次检查文档宽度。

代码使用jQuery来简化。

$(document).mousemove(function(e){
  var CONTEXT_MENU_WIDTH = 200,
      pos = 'RIGHT';
  if( ($(document).width() - CONTEXT_MENU_WIDTH) < e.pageX )
    pos = 'LEFT';     
  $('#status').html(e.pageX +', '+ e.pageY);
  $('#position span').html(pos);
}); 

编辑

只是添加了一条简单的垂直线来帮助定位。

CONTEXT_MENU_WIDTH变量应该是您希望上下文菜单更改位置的区域宽度。