Estoy raspando Slack usando Puppeteer. Quiero verificar si me desplacé a la parte superior del feed del canal.
El problema es que el feed del canal no se desplaza, por lo que no puedo usar el método documentado en MDN :
element.scrollHeight - Math.abs(element.scrollTop) === element.clientHeightPara mi caso, donde el elemento no se desplaza pero tiene elementos secundarios desbordados, sugieren verificar el estilo calculado:
window.getComputedStyle(element).overflowY === 'visible' Sin embargo, eso no funciona, creo que por dos razones. En primer lugar, en este caso, parece que el desbordamiento oculto está configurado en otro contenedor principal, por lo que el contenedor que estoy viendo siempre tiene un estilo de overflowY calculado Y configurado en visible . En segundo lugar, los elementos secundarios siempre se desbordarán en la dirección Y si me desplazo hasta la parte superior (si estoy en la parte superior, se desbordan en la parte inferior).
Entonces, ¿cómo verifico si un contenedor se desborda en la parte superior y solo en la parte superior?
Si desea verificar su código en el elemento específico que estoy tratando de verificar en la aplicación Slack, inicie sesión en un espacio de trabajo de Slack y seleccione ese elemento en la consola con:
document.querySelector(`[aria-label="${channelName} (channel)"]`) Donde channelName es algo así como 'general' o cualquiera que sea el nombre del canal activo que muestra su feed.
Finalmente, encontré una solución que hace el trabajo. Agarro el contenedor de alimentación del canal y compruebo la posición de su borde superior en relación con la ventana gráfica. Si es negativo, significa que todavía hay más para desplazarse.
const channelFeed = document.querySelector(`[aria-label="${channelName} (channel)"]`) const isScrolledToTop = channelFeed.getBoundingClientRect().y > 0Esto funciona ya que el contenedor del feed del canal no se desplaza. Contiene elementos (las publicaciones) y su longitud completa existe en la página, excepto que el desbordamiento está oculto en la parte superior e inferior. Eso significa que puedo verificar si el borde superior aún se desborda de la ventana gráfica.