Visible body's scrollbar without noticeable overflow content

[prandleman]

I'm assuming the point of this is to have everything in one frame eliminating the need to scroll down. For some reason I get a scrollbar that only moves a few pixels. While back I believe I disabled did a test with only this userscript running and issue still seemed to happen on 1920x1080.

If I use js console to inject something simple like document.body.style.overflow = 'hidden';, this works fine but the userscript executes after my attempt with and injector for both 'DOMContentLoaded' and 'load'. Any recommendations?

[cyfung1031]

I don't understand what is your problem regarding scrollbar....

Is there a UI bug due to this script? Which scrollbar you mean?

What do you want to achieve?

Any screenshot or sketch can visualize what you are going to say?

[prandleman]

https://imgur.com/a/AoTgFwB

[Dark3n89]

https://imgur.com/a/AoTgFwB Bro Lol use element scanner via console and you will see empty youtube bullshit, simply remove it with css or script.. I using very old code of this project and only one change what i must do, is remove something like comment box (empty div) idk name now.

[cyfung1031]

https://imgur.com/a/AoTgFwB

Let me give you the answer first. You can use stylus or userscript to inject the following css rule to hide the scrollbar in the watch page.

html.tabview-normal-player body {
  overflow-y: hidden;
}

This "bug" might appear to some browsers for some users in some PCs. Perhaps YouTube is rolling out new features. Therefore I would like to wait until I can experience this issue, then I can do the pinpoint fixing.

One possible cause is the cinematic effect. You can try to disable it to see whether it helps or not. (But this should not happen in Google Chrome)

Also, you might try to update your browser if the version is not latest.

[cyfung1031]

As @Dark3n89 said, there could be some empty youtube bullshits. (no content but occupying the space)

@prandleman If you have found out the exact element(s) causing the issue, please let me know :) .

You might check here to see how to use Chrome's DevTools to find out the empty block(s) in your page.

e.g.

* {
    outline: 1px dashed rgba(220, 0, 0, 0.6) !important;
    outline-offset: -1px !important;
}

[cyfung1031]

No further information available for this issue.

[prandleman]

One of the first things I noticed was that when the scroll happens the container/frame that holds the bulk of the page (sorry I don't know proper css terms) seems to be pushing into the masthead container

[prandleman]

I figured this was a one off issue with my setup and I understand that it could be many things which is why I tried no extensions except ublock (no custom filters). Was this the intent of the userscript? Do all of you have everything confined to one no scroll page? btw, thank you for this. can tell you put lots of time into it

[cyfung1031]

1. Did you try this CSS rule?

html.tabview-normal-player body {
  overflow-y: hidden;
}

should work for you. Did you try?

2. Issues & Finding based on your video (1)

from your recording suggested, the tab container size is okay. it is not due to its oversizing. (the size 426 x 947 is including the padding 24px 24px 0px 0px, which is the correct sizing for your window)

When it compared to your ytd-watch-flexy size 1903 x 960, there is extra 13px in ytd-watch-flexy. (The correct size should be 1903 x 947)

3. Issues & Finding based on your video (2)

It seems to be something above the tab container and video. It should be inside ytd-watch-flexy but outside #secondary (e.g. ytd-watch-flexy, children elements of ytd-watch-flexy, #columns, children elements of #columns)

You can point to the elements one by one to find out the 13px

#column, #primary and #secondary should have the same size. i.e. 947px in your case.

iron-xxxxx are invisible those #microformat, #miniplayer-bar, #player-wide-container, #single-column-container shall be visible but their height is 0.

4. Cannot fix unknown issue

I cannot fix the problem that caused by unknown reason

5. Try YouTube Live Borderless

You might try to use https://greasyfork.org/scripts/457317-youtube-live-borderless It might help.

6. Ensure your Chrome is latest

Have you updated to latest version Chrome? Chrome is designed to work with latest version only.

Remarks

I would like to point out that, I design it to be prefect fit, but YouTube's original layout has so many issues. As their original design does not care about the height of the page (always scrolling) Even my stuff perfectly fits, there is still some empty blocks in the page to let you scroll.

[cyfung1031]

No further information available for this issue.