En mi PWA, uso la biblioteca Better-Scroll (v2.4.2) sobre el scroller nativo del navegador para una experiencia más consistente en todos los dispositivos. El problema es que debido a la naturaleza de cómo el navegador se desplazará a los elementos con un tabindex válido, supongo que el mejor desplazamiento se romperá porque el navegador está activando el desplazamiento en lugar del usuario, por lo que no se da cuenta de que la página se está desplazando.

Una vez que se desplaza la página, el posicionamiento de better-scroll interrumpe toda la experiencia de desplazamiento para el usuario.

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

No sé si me estoy perdiendo algo o Better-Scroll espera que manejemos esos escenarios por nuestra cuenta. Una solución que he encontrado es, por supuesto, establecer elementos en un tabindex de -1, pero no creo que deba hacerlo, ya que ese es el comportamiento esperado por razones de accesibilidad.