移动端Chromium浏览器浮动框拖拽防意外滚动问题排查与解决

问题描述 #

我编写了一个带顶栏的浮动框，顶栏包含若干按钮，用户点击或触摸顶栏时应能拖动浮动框到任意位置。但在Chromium内核的移动端浏览器（桌面端也存在该问题，但情况较轻）中出现异常：拖动浮动框时，浏览器反而尝试滚动页面，触摸顶栏拖拽时，实际滚动的是浮动框后方的页面。

我已尝试设置touch-action: none，虽有改善但未彻底解决；多次使用ev.preventDefault、ev.stopPropagation以及设置z-index: 1000均无效果。在不同手机上使用同一Brave浏览器测试时，结果也不一致，有时甚至完全无法拖动顶栏。

代码示例 #

const createfloatingbox = () => {
    const floatingbox = document.createElement("div");
    floatingbox.classList.add("floatingbox");
    const topbar = document.createElement("div");
    const floatingboxContent = document.createElement("textarea");
    floatingboxContent.classList.add("floatingbox-content");

    floatingboxContent.value = `some text`;

    topbar.innerHTML = `
        <button class="floatingbox-copy" title="Copiar texto" style="height: 1.5rem; width: 1.5rem; top: 2px">svg</button>
        <button onclick="
        const floatingboxContent = this.closest('.floatingbox').querySelector('.floatingbox-content');
        floatingboxContent.style.display = floatingboxContent.style.display ? '' : 'none'; 
        ">—</button>
        <button onclick="this.closest('.floatingbox').remove();">X</button>
    `;

    floatingbox.style.cssText = `
        position: fixed; 
        top: 3rem;
        left: 2rem;
        z-index: 10;
        border: 1px solid #ccc;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    `;
    topbar.style.cssText = `
        cursor: move;
        user-select: none;
        display: flex;
        justify-content: flex-end;
        width: 100%;
        min-width: 5rem;
        background-color: #DDD;
        /* 
        * "touch-action" is critical for mobile Chromium,
        * because it privileges touch for scrolling, dragging,
        * etc., so these take priority over my code
        */
        touch-action: none;
    `;
    // some stylesheet is changing the buttons padding... bad quick fix:
    topbar
        .querySelectorAll("button")
        .forEach((btn) => (btn.style.padding = "0 5px"));
    floatingboxContent.style.cssText = `
        width: 500px;
        height: 500px;
        max-width: 90vw;
        max-height: 90vh;
    `;

    floatingbox.append(topbar, floatingboxContent);
    document.body.prepend(floatingbox);

    // drag box around
    let offset = { x: 0, y: 0 };

    topbar.addEventListener("pointerdown", (e) => {
        offset.x = e.clientX - floatingbox.offsetLeft;
        offset.y = e.clientY - floatingbox.offsetTop;
        
        // set pointer capture, because floatingbox is moving on top of different iframes
        topbar.setPointerCapture(e.pointerId);

        e.preventDefault();
        e.stopImmediatePropagation();

        const drag = (e) => {
            floatingbox.style.left = e.clientX - offset.x + "px";
            floatingbox.style.top = e.clientY - offset.y + "px";
            
            /* these seemed to make things a little worse instead of improving:
            e.preventDefault();
            e.stopPropagation();
            */
        };

        window.addEventListener("pointermove", drag);
        window.addEventListener("pointerup", () => {
            window.removeEventListener("pointermove", drag);
        }, { once: true });
    });
};
createfloatingbox();

问题解答 #

1. 是浏览器/设备bug，还是代码存在问题？ #

两者都有影响：

• 首先，Chromium移动端的触摸事件处理确实存在兼容性问题，滚动行为的抢占逻辑在不同设备（如触控硬件、系统版本）上表现不一致，属于浏览器层面的bug。
• 代码也有优化空间：比如pointermove绑定在window上易和页面滚动事件竞争；touch-action: none的作用范围未覆盖所有相关元素；顶栏按钮的点击事件可能干扰拖动逻辑，这些都会加剧问题。

2. 如何避免Chromium内核浏览器的滚动优先行为，让代码正常运行？ #

可以试试这些优化方案：

• 扩大touch-action: none作用范围：给浮动框本身也设置该属性，避免浏览器识别框内触摸动作触发滚动：

  floatingbox.style.touchAction = "none";
  

• 在pointermove中强制阻止默认行为：之前的误区可能是时机不对，在drag函数内调用e.preventDefault()，强制阻止滚动等默认行为：

  const drag = (e) => {
      floatingbox.style.left = e.clientX - offset.x + "px";
      floatingbox.style.top = e.clientY - offset.y + "px";
      e.preventDefault();
  };
  

• 将pointermove绑定到顶栏而非window：减少事件传播层级，避免和页面滚动事件冲突，同时在pointerup时解除顶栏的事件绑定：

  topbar.addEventListener("pointermove", drag);
  topbar.addEventListener("pointerup", () => {
      topbar.removeEventListener("pointermove", drag);
  }, { once: true });
  

• 禁用按钮的触摸动作：给顶栏所有按钮添加touch-action: none，防止按钮触发浏览器触摸交互：

  topbar.querySelectorAll("button").forEach(btn => {
      btn.style.padding = "0 5px";
      btn.style.touchAction = "none";
  });
  

• 提升z-index值：将浮动框的z-index设为更高值（如9999），确保它在页面最上层，避免事件被下层元素捕获。
• 完善指针捕获逻辑：在pointerup时释放指针捕获，避免后续事件异常：

  window.addEventListener("pointerup", () => {
      topbar.releasePointerCapture(e.pointerId);
      window.removeEventListener("pointermove", drag);
  }, { once: true });
  

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