Scroll within individual elements in the page

[srgsanky]

Describe the bug

I want to be able to scroll within individual elements that contain text. For e.g. https://github.com/wez/wezterm/issues/216#issuecomment-647820803 shows a long configuration. Is there any existing bindings to do this? I tried gf/gF but since this is not an iFrame, it does not help.

To Reproduce

Steps to reproduce the behavior:

1. Go to URL https://github.com/wez/wezterm/issues/216#issuecomment-647820803
2. Try to scroll the configuration.

Browser and Vimium version

If you're using Chrome, include the Chrome and OS version found at chrome://version. Also include the Vimium version found at chrome://extensions.

N/A

[philg-dev]

The configuration that's quoted in the code block in the comment you've linked doesn't even have any scrolling - it's fully rendered on my end. How do you suppose any scrolling to happen within that code block, when the only thing that can scroll is the page itself around it?

Did you mean horizontal scroll by any chance? A code block further down had some longer lines, which actually had a horizontal scrollbar. I could click on the code block and then use H and L default Vimium bindings for horizontal scrolling. I don't think there's any easy way for Vimium to make it possible to focus such elements in arbitrary contexts though.

[srgsanky]

The configuration that's quoted in the code block in the comment you've linked doesn't even have any scrolling - it's fully rendered on my end.

Interesting, I see a vertical scrollbar as seen below.

I could click on the code block and then use H and L default Vimium bindings for horizontal scrolling. I don't think there's any easy way for Vimium to make it possible to focus such elements in arbitrary contexts though.

Is it possible to click on the code block using Vimium (i.e. without using mouse)? The reason I ask is, once I click on the code block, I am able to scroll using h/j/k/l.

[philg-dev]

Yeah, I realize you're asking to avoid having to use the mouse. But as I said, I highly doubt that there's any easy way for Vimium to make it possible to focus such elements with scrollbars.

If your use-case is specific enough, you could potentially find another workaround with a Userscript (Tampermonkey) or a Userstyle (Stylus). Since I can't even reproduce the behavior you're experiencing with the large code block on GitHub, I'm afraid, I'm unable to provide any further assistance.

Maybe somebody else can help.

[srgsanky]

Since you mentioned about not being able to reproduce this behavior, I just found out that the Chrome extension refined github is causing the scroll bar in the code block.

https://chromewebstore.google.com/detail/refined-github/hlepfoohegkhhmjieoechaddaejaokhf?hl=en (scrollable-areas is the specific option causing this behavior.)

---

I highly doubt that there's any easy way for Vimium to make it possible to focus such elements with scrollbars.

Is it not possible to click on elements that are scrollable similar to how f works for links? The following gives the list of elements with a scrollbar.

const scrollableElements = Array.from(document.querySelectorAll('*')).filter(element => {
    const style = window.getComputedStyle(element);
    const overflowY = style.overflowY;
    const overflowX = style.overflowX;

    const isScrollableY = overflowY === 'auto' || overflowY === 'scroll';
    const isScrollableX = overflowX === 'auto' || overflowX === 'scroll';

    return (isScrollableY && element.scrollHeight > element.clientHeight) || 
           (isScrollableX && element.scrollWidth > element.clientWidth);
});

console.log(scrollableElements);

[philg-dev]

Sure, I think this would be technically possible for sure - I'm just not sure if the devs are willing to drill up the existing functionality and try to fit in a new feature like that.

I do think it would be a pretty nice addition, to be honest. So maybe you can add "Feature Request:" to the front of the issue title and see if the devs notice it. I'm not sure how they usually handle feature requests.