屏幕缩放时可拖拽侧边栏无法触达屏幕最右侧的问题求解

问题说明 #

调整屏幕缩放比例（如90%、100%）时，页面中的可拖拽侧边栏无法拖拽至屏幕最右侧，最多仅能到达中部区域。需要实现无论屏幕是否缩放，侧边栏都能触达屏幕最右侧的效果。

问题现象 #

期望效果 #

拖拽手柄至最右侧时，无论屏幕缩放与否，需呈现如下效果：

问题原因 #

原代码中maxBarWidth的计算逻辑存在问题：用固定的elmnt.offsetWidth / 16做减法，屏幕缩放时实际像素与CSS像素不匹配，导致最大宽度计算偏差，限制了侧边栏的扩展范围。

修复后的完整代码 #

<html>
<style>
#bar {
  position: fixed; /* Fixed position to stay in place on scroll */
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px; /* Initial width of the bar */
  background-color: #f1f1f1; /* Background of the bar */
  border-right: 1px solid #d3d3d3; /* Border of the bar */
  z-index: 9;
}

#handle {
  width: 100px; /* Diameter of the handle circle */
  height: 100px; /* Height of the handle circle */
  background-color: #2196F3;
  border-radius: 50%; /* Make it round */
  position: absolute; /* Absolute position within the bar div */
  top: 50%; /* Center it vertically */
  right: -3.125em; /* Align to the right of the bar */
  transform: translateY(-50%); /* Adjust vertical position */
  cursor: pointer; /* Change cursor to indicate it's draggable */
  z-index: 10;
  clip-path: inset(0 0 0 50%); /* Clip left half of the circle */
  background-image: url('https://i.gifer.com/2P5x.gif');
  background-repeat: no-repeat;
  background-size: 90% 100%; /* Width and height values */
  background-position: calc(100% +  0.625em) center; /* Move the image to the right by 10 pixels from the edge */
}

#handle.blue-bg {
    background-image: url('https://virtualisedreality.files.wordpress.com/2012/07/the-best-top-desktop-blue-wallpapers-blue-wallpaper-blue-background-hd-33.jpg');
    background-position-x: right;
}

</style>
<body>

<div id="bar">
  <!-- 可拖拽手柄 -->
  <div id="handle"></div>
</div>

<script>
// 初始化拖拽功能
dragElement(document.getElementById("handle"));

function dragElement(elmnt) {
  var startPosX = 0, currentPosX = 0;
  // 动态计算侧边栏最大宽度：屏幕宽度减去手柄向右偏移的实际像素值，确保手柄能贴到屏幕最右侧
  var handleRightOffset = parseFloat(getComputedStyle(elmnt).right);
  var maxBarWidth = window.innerWidth - (handleRightOffset * -1);

  elmnt.onmousedown = dragMouseDown;

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    startPosX = e.clientX;
    document.onmouseup = closeDragElement;
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    currentPosX = e.clientX - startPosX;
    startPosX = e.clientX;
    var bar = document.getElementById("bar");
    var newWidth = bar.clientWidth + currentPosX;
    
    // 侧边栏最小宽度保持初始值3px
    var minBarWidth = 3;

    // 限制宽度在最小和最大值之间
    newWidth = Math.max(minBarWidth, Math.min(newWidth, maxBarWidth));

    // 更新侧边栏宽度
    bar.style.width = newWidth + "px";

    var handle = document.getElementById("handle");

    // 根据位置切换手柄背景
    if (newWidth >= maxBarWidth) {
        handle.classList.add('blue-bg');
    } else {
        handle.classList.remove('blue-bg');
    }
  }

  function closeDragElement() {
    // 释放鼠标时停止拖拽
    document.onmouseup = null;
    document.onmousemove = null;
  }
}
</script>

</body>
</html>

关键修改点 #

1. 动态计算最大宽度：通过getComputedStyle获取手柄的right偏移值，转换成实际像素后，用屏幕宽度减去该偏移值作为侧边栏的最大宽度。这样不管屏幕怎么缩放，都能保证手柄刚好贴到屏幕最右侧。
2. 移除固定数值依赖：删掉原代码中elmnt.offsetWidth / 16这种固定比例计算，避免缩放时出现像素不匹配的问题。

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