如何根据鼠标event.clientX在50vw位置控制div的显示与隐藏

问题描述 #

各位好，我想了解是否可以获取对应50vw的鼠标X轴数值。目前我已经实现了根据鼠标在X轴的位置来显示或隐藏div，但我想要实现的是仅当鼠标越过50vw位置时才触发div的显示或隐藏操作，希望能得到大家的帮助。我搜索后没有找到相关答案，以下是我的代码：

document.body.addEventListener('mousemove', function (event) { 
  if (event.clientX >= 500) { 
    console.log("show div or addclass"); 
  } else { 
    console.log("hide div or remove class"); 
  } 
}, false);

自解决方案 #

后来我自己摸索出了解决办法！因为平时习惯用CSS的vw单位，一开始没想到可以用JS动态计算视口宽度的一半。核心就是用window.innerWidth/2来获取50vw对应的像素值，替换掉原来固定的500像素阈值。

修改后的基础代码如下：

document.body.addEventListener('mousemove', function (event) { 
  // 动态获取视口宽度的一半，对应CSS中的50vw
  const halfViewport = window.innerWidth / 2;
  if (event.clientX >= halfViewport) { 
    console.log("show div or addclass"); 
  } else { 
    console.log("hide div or remove class"); 
  } 
}, false);

如果需要适配窗口大小变化的情况，可以额外监听resize事件，确保窗口缩放时阈值能实时更新：

// 初始化视口半宽
let halfViewport = window.innerWidth / 2;

// 窗口大小变化时更新阈值
window.addEventListener('resize', () => {
  halfViewport = window.innerWidth / 2;
});

document.body.addEventListener('mousemove', function (event) { 
  if (event.clientX >= halfViewport) { 
    console.log("show div or addclass"); 
  } else { 
    console.log("hide div or remove class"); 
  } 
}, false);

内容的提问来源于stack exchange，提问作者Noel