当窗口滚动到具有 tabindex 的元素时，Better-Scroll 会中断答案

【问题标题】：Better-Scroll breaks when window scrolls to elements that have tabindex当窗口滚动到具有 tabindex 的元素时，Better-Scroll 会中断
【发布时间】：2022-10-30 21:33:42
【问题描述】：

在我的 PWA 中，我在原生浏览器滚动条上使用 Better-Scroll 库 (v2.4.2)，以获得跨设备最一致的体验。问题是，由于浏览器如何滚动到具有有效 tabindex 的元素的性质，我认为 better-scroll 会中断，因为浏览器正在触发滚动而不是用户，使其不知道页面正在滚动。

页面滚动后，better-scroll 的定位将打破用户的整个滚动体验。

HTML：

<div class="itemsWrapper">
    <div class="itemsContainer">
        <ul class="items"></ul>
    </div>
</div>

CSS：

ul {
    list-style: none;
}

.itemsWrapper {
  position: relative;
  overflow: hidden;
  height: 300px;
}

JS：

import * as betterScroll from "https://cdn.skypack.dev/better-scroll@2.4.2";

function createScroll() {
  const itemsWrapper = document.querySelector(".itemsWrapper");

  betterScroll.createBScroll(itemsWrapper, {
    scrollbar: {
        fade: true
    },
    mouseWheel: {
        easeTime: 200
    },
    tagException: {
        tagName: /^(INPUT|TEXTAREA|SELECT|CANVAS)$/
    },
    scrollY: true,
    scrollX: false
  })
}

const items = document.querySelector(".items");
let listItems = "";

for(let i = 0; i < 50; i++) {
  listItems += `
    <li>
      <input tabindex='${i+1}' type='text'/>
    </li>
  `;
}

items.innerHTML = listItems;

createScroll()

密码笔：https://codepen.io/LeeRob97/pen/JjOvXgO

我不知道我是否遗漏了什么，或者 Better-Scroll 希望我们自己处理这些情况。我发现的一种解决方案当然是将元素设置为 -1 的 tabindex，但我认为我不应该这样做，因为出于可访问性原因，这是预期的行为。

【问题讨论】：

标签： javascript html scroll

【解决方案1】：

你现在解决这个问题了吗？

【讨论】：