Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature Request: Scroll within individual elements in the page #4551

Open
srgsanky opened this issue Oct 5, 2024 · 5 comments
Open

Feature Request: Scroll within individual elements in the page #4551

srgsanky opened this issue Oct 5, 2024 · 5 comments

Comments

@srgsanky
Copy link

srgsanky commented Oct 5, 2024

Describe the bug

I want to be able to scroll within individual elements that contain text. For e.g. wez/wezterm#216 (comment) 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 macos: send_composed_key_when_alt_is_pressed = false is not easily discoverable wez/wezterm#216 (comment)
  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
Copy link

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
Copy link
Author

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.

Screenshot 2024-11-10 at 14 15 33

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
Copy link

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
Copy link
Author

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
Copy link

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.

@srgsanky srgsanky changed the title Scroll within individual elements in the page Feature Request: Scroll within individual elements in the page Nov 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants