ray
58 lines
2.1 KiB
Markdown
58 lines
2.1 KiB
Markdown
# Browser Inner-Scroll Debugging
|
|
|
|
## The Problem
|
|
|
|
The `browser_scroll` tool scrolls the document viewport. But many React SPAs (like SPQ-v2) have a fixed layout where the scrollable content lives inside an inner element (e.g., `<main>` with `overflow-y-auto`). When `browser_scroll` fires, the document moves but the inner content stays put — buttons below the fold remain invisible and unclickable.
|
|
|
|
## Diagnosis
|
|
|
|
Use `browser_console` expression to check if a target button is below the viewport:
|
|
|
|
```javascript
|
|
(function(){
|
|
var allBtns = document.querySelectorAll('button');
|
|
for(var i=0; i<allBtns.length; i++) {
|
|
var b = allBtns[i];
|
|
if(b.textContent.includes('Save')) {
|
|
return 'disabled=' + b.disabled +
|
|
' top=' + b.getBoundingClientRect().top +
|
|
' bottom=' + b.getBoundingClientRect().bottom +
|
|
' windowH=' + window.innerHeight;
|
|
}
|
|
}
|
|
return 'not found';
|
|
})()
|
|
```
|
|
|
|
If `bottom > windowH`, the button is off-screen and can't be clicked by the browser tool.
|
|
|
|
## Fix
|
|
|
|
Scroll the inner scrollable container to reveal the button:
|
|
|
|
```javascript
|
|
(function(){
|
|
var main = document.querySelector('main');
|
|
if(main) {
|
|
main.scrollTop = main.scrollHeight;
|
|
return 'scrolled main to ' + main.scrollTop;
|
|
}
|
|
// Try other scrollable containers
|
|
var candidates = document.querySelectorAll('[class*="overflow"]');
|
|
for(var c of candidates) {
|
|
if(c.scrollHeight > c.clientHeight) {
|
|
c.scrollTop = c.scrollHeight;
|
|
return 'scrolled ' + c.tagName + '.' + c.className.split(' ')[0] + ' to ' + c.scrollTop;
|
|
}
|
|
}
|
|
return 'no scrollable container found';
|
|
})()
|
|
```
|
|
|
|
After scrolling, verify the button is now visible by re-running the diagnosis expression. A button is clickable when its `top` is between 0 and `windowH`.
|
|
|
|
## Pitfall
|
|
|
|
- The `browser_console` tool blocks access to `localStorage` but allows DOM queries like `querySelector` and `getBoundingClientRect` — use these for UI debugging.
|
|
- Some SPAs have MULTIPLE scrollable containers (sidebar, main content, modal overlays). Find the right one by checking `scrollHeight > clientHeight`.
|