In my PWA, I use the Better-Scroll library (v2.4.2) over the native browser scroller for a most consistent experience across devices. The problem is that due to the nature of how the browser will scroll to elements with a valid tabindex, better-scroll will break I assume because the browser is triggering the scroll instead of the user, making it unaware that the page is being scrolled.

After the page is scrolled, better-scroll's positioning is off breaking the whole scrolling experience for the user.

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()

Codepen: https://codepen.io/LeeRob97/pen/JjOvXgO

I don't know if there is something I am missing or Better-Scroll expects us to handle those scenarios on our own. One solution that I have found is of course setting elements to a tabindex of -1, but I don't feel that I should have to do that since that is expected behavior for accessibility reasons.