如何解决如果屏幕上有多个监视器和任何大小的窗口,则获得正确的 onClick 位置坐标
有一个页脚组件,它重新渲染一个表示某些源的进度和完成百分比的条
有一个名为 useBar
的 onClick
钩子,进度条会快进或快退到点击进度条的位置。
问题是它并非在所有情况下都有效,它仅在浏览器窗口最大化时有效。如果通过拖动角落调整浏览器窗口大小或浏览器窗口位于显示器的某些区域时,则不起作用
它也需要在多显示器的情况下正常工作,如果有相对于视口/当前窗口的辅助桌面显示器
const barCallBack = useBar;
...
<div className={style.BarContainer}>
<div>{millisToMinutesAndSeconds(time)}</div>
<div
className={style.Wrapper}
onClick={(event) => barCallBack(event,timeRef,setProgress)}
ref={timeRef}
>
<div className={style.Bar}>
<div
className={style.Progress}
style={{ transform: `translateX(-${100 - progress}%)` }}
/>
</div>
<button style={{ left: `${progress}%` }} />
</div>
<div>{millisToMinutesAndSeconds(song.duration_ms)}</div>
</div>
export const useBar = (event,elmRef,callback) => {
if (elmRef.current) {
const right = elmRef.current.getBoundingClientRect().right;
const left = elmRef.current.getBoundingClientRect().left;
const { screen } = window;
const { availLeft,availTop } = screen;
const hostScreenX=event.screenX-availLeft+ (availLeft ? (screen.width - screen.availWidth) : 0);
const pos = hostScreenX; //stopped using event.screenX to make it work on secondary monitors
const scale = right - left;
const input = pos - left;
const percent = Math.round((input * 100) / scale);
callback(percent);
}
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。