Greasy Fork

Just quick check your coding

it seems like a pure css userscript?


ytd-comments {
position: fixed;
display: inline-block;
min-width: 38.8% !important;
max-width: 38.8% !important;
height: 90vh;
left: 60% !important;
top: 85px;
padding: 0 10px;
overflow: hidden;
z-index: 50000;
visibility: hidden;
background: black;
}



You cannot do this.
comments must be visible !! otherwise nothing can be loaded.
might be you can luckily to get the inital comments


My solution is


ytd-comments {
position: fixed;
display: inline-block;
min-width: 38.8% !important;
max-width: 38.8% !important;
height: 90vh;
left: 60% !important;
top: 85px;
padding: 0 10px;
overflow: hidden;
z-index: -50000;
visibility: visible;
pointer-events:none;
background: black;
}


Besides, make sure that the scrolling can trigger window's event.
( in js, window.dispatchEvent(new Event("scroll")); )

I don't know how the css scrollable element can do this without javascript.

Thanks for you time !

Normally, i have the first comments loaded (we need wait a little to have them and the Comment Tab appear with them)

After a very quick test with your suggestion:

z-index: -50000;
visibility: visible;
pointer-events:none;

I lost the comments Tab....


About:
in js, window.dispatchEvent(new Event("scroll"));
Have you an idea about to do that for Youtube ?

Yes. I tried your script and your comments tab lost.

Youtube use "visiblity" of the element #continuations to detect whether more comments shall be loaded.

The visibility is defined by display, visibility, content-visibility, contain-intrinsic-size, getBoundingClientRect(), etc. So my only solution is position:absolute OR fixed + z-index:-1 + located inside the page ( 100vw>x2>x1>0 and 100vh>y2>y1>0 )

However, there is no a event called "onshow" and "onhide". Then Youtube add an event listener to scroll event.
So you have to show this element and dispatch the scroll event to load comments.

I don't know how to do it in pure CSS.

Might be ....

"hiding" ytd-comments#comments>ytd-item-section-renderer#sections and ytd-comments#comments>tp-yt-paper-spinner-lite
let the ytd-comments#comments visible and ytd-comments#comments::before {content:"Comment Tab" ....} to make the tab button.
Your detection on the ytd-comments#comments:hover can work and ytd-comments#comments>* can be hidden as z-index:-1

Hey I just find these two css are critical to your success.


html ytd-comments {
visibility: collapse;
}

html ytd-comments:hover #contents{
height:70vh;
}


1) you can use visibility: collapse; to replace visibility: hidden;, so the youtube coding can work on it.
2) you have set the height of #contents too large, so the #continuations leaves outside the visible region.


You will load the first set of comments automatically because you have visibility: collapse;
and then you scroll to the end of the comment will have nothing happened.
As said, you need to trigger the window scroll event.
You can leave your cursor from the comment area, and go somewhere else, make some scroll.
sometimes it triggered the window scroll event and then you can load the next set of comments when you open back the comments


html ytd-comments {
visibility: collapse;
}

html ytd-comments #contents{
height:70vh;
}


This will make the comments loading non-stop.
As the location of #continuations is fixed (position fixed?) in the visible area.

So the first loading will wrongly detect the status and keep looping... even through there is no scroll event to the main page

HoHo...
What's a hard work and a precise explanation!

Now i need to test that :-)

I an other hand, your script (Tabview Youtube) is nearly that is wanted.

After a "quick" test, your trick seems working perfectly!

Comments load perfectly, but in first i was confused by the difference between le number of comments noticed by Youtube and these counted by my userstyles (or in Firebug - yes i am old school guy and don't find the easy way to use the DevTools like i can with firebug)).

I tested without my userstyle and yes, there is a (big) difference between youtube counter and mine:
Strange, but not the fault of my CSS!

I need to test more, but you find the good trick!

PS:
I never used before because i though i was for table only :
visibility: collapse;

I go to watch that too:
- Difference between Visibility.Collapsed and Visibility.Hidden
- Difference between “visibility:collapse” and “display:none”