feat(controller): consider hasScrollbarSignal when detecting scrollable

This commit is contained in:
Simon
2026-04-03 16:09:35 +08:00
parent 85a33ac1a4
commit 0ca1c8de0b
2 changed files with 19 additions and 6 deletions

View File

@@ -287,7 +287,10 @@ export async function scrollVertically(scroll_amount: number, element?: HTMLElem
while (currentElement && attempts < 10) { while (currentElement && attempts < 10) {
const computedStyle = window.getComputedStyle(currentElement) const computedStyle = window.getComputedStyle(currentElement)
const hasScrollableY = /(auto|scroll|overlay)/.test(computedStyle.overflowY) const hasScrollableY =
/(auto|scroll|overlay)/.test(computedStyle.overflowY) ||
(computedStyle.scrollbarWidth && computedStyle.scrollbarWidth !== 'auto') ||
(computedStyle.scrollbarGutter && computedStyle.scrollbarGutter !== 'auto')
const canScrollVertically = currentElement.scrollHeight > currentElement.clientHeight const canScrollVertically = currentElement.scrollHeight > currentElement.clientHeight
if (hasScrollableY && canScrollVertically) { if (hasScrollableY && canScrollVertically) {
@@ -426,7 +429,10 @@ export async function scrollHorizontally(scroll_amount: number, element?: HTMLEl
while (currentElement && attempts < 10) { while (currentElement && attempts < 10) {
const computedStyle = window.getComputedStyle(currentElement) const computedStyle = window.getComputedStyle(currentElement)
const hasScrollableX = /(auto|scroll|overlay)/.test(computedStyle.overflowX) const hasScrollableX =
/(auto|scroll|overlay)/.test(computedStyle.overflowX) ||
(computedStyle.scrollbarWidth && computedStyle.scrollbarWidth !== 'auto') ||
(computedStyle.scrollbarGutter && computedStyle.scrollbarGutter !== 'auto')
const canScrollHorizontally = currentElement.scrollWidth > currentElement.clientWidth const canScrollHorizontally = currentElement.scrollWidth > currentElement.clientWidth
if (hasScrollableX && canScrollHorizontally) { if (hasScrollableX && canScrollHorizontally) {

View File

@@ -503,11 +503,16 @@ export default (
const overflowX = style.overflowX const overflowX = style.overflowX
const overflowY = style.overflowY const overflowY = style.overflowY
// Check scrollable distances // scrollbar-width/scrollbar-gutter are only set on elements designed to scroll;
// their presence signals scroll intent even when overflow is hidden (e.g. overflow: auto on :hover)
const hasScrollbarSignal =
(style.scrollbarWidth && style.scrollbarWidth !== 'auto') ||
(style.scrollbarGutter && style.scrollbarGutter !== 'auto')
const scrollableX = overflowX === 'auto' || overflowX === 'scroll' const scrollableX = overflowX === 'auto' || overflowX === 'scroll'
const scrollableY = overflowY === 'auto' || overflowY === 'scroll' const scrollableY = overflowY === 'auto' || overflowY === 'scroll'
if (!scrollableX && !scrollableY) { if (!scrollableX && !scrollableY && !hasScrollbarSignal) {
return null // Not scrollable in any direction return null // Not scrollable in any direction
} }
@@ -521,11 +526,11 @@ export default (
return null // Not scrollable return null // Not scrollable
} }
if (!scrollableY && scrollWidth < threshold) { if (!scrollableY && !hasScrollbarSignal && scrollWidth < threshold) {
return null // Not scrollable horizontally return null // Not scrollable horizontally
} }
if (!scrollableX && scrollHeight < threshold) { if (!scrollableX && !hasScrollbarSignal && scrollHeight < threshold) {
return null // Not scrollable vertically return null // Not scrollable vertically
} }
@@ -547,6 +552,8 @@ export default (
scrollData: scrollData, scrollData: scrollData,
}) })
console.log('scrollData!!!', scrollData)
return scrollData return scrollData
} }