Can I make tabsets non-scrolling on activation?

[bersbersbers]

I'd like the document to not scroll when clicking a tab - can this be done?

---
output:
   rmdformats::material
---
## H2 {.tabset}
<img height=200>

### H3A
<img height=2000>

### H3B
<img height=2000>

This is what I currently have - any time I click H3A or H3B, I have to scroll down again:

[bersbersbers]

(It would be fine if the body maybe scrolled a bit, but it is scrolling so far I don't even see the tab header any more.)

[juba]

Maybe I don't understand correctly, but this problem doesn't seem to occur with a complete document :

---
title: test
output:
   rmdformats::material
---

# Titre 1

## H2 {.tabset}

Hello
<img height=200>

### H3A

Foo 

<img height=2000>

### H3B

Bar

<img height=2000>


# Titre 2

Baz

[bersbersbers]

@juba thanks for your quick response! I can reproduce the same scrolling effect with that full document that you shared. Upon clicking H3A, H3A scrolls so that I cannot see "H3A" any longer. This problem exists in in Chrome 95, but not in IE 11. Maybe you are (one of the few :D) using a different browser than Chrome?

[bersbersbers]

Ah, behavior in IE11 not completely dissimilar: if you click the active tab, then it scrolls up.

But if you click an inactive tab, that tab is selected without scrolling. This is the behavior I'd like in Chrome, too.

[bersbersbers]

This is IE 11 - see how it is not scrolling when clicking an inactive tab:

[juba]

Ah I see, you're right, I got the same behavior in Firefox as in IE11, but when trying in Edge I can see the same thing as you.

Unfortunately I've taken a look but didn't find the culprit for now. It seems to be a weird interaction between Bootstrap and the template JavaScript, but I don't see what exactly. But I'll continue to try to fix it.

[bersbersbers]

Thanks! If you happened to find/know any hacky way to disable on-click scrolling completely, that would also work for me.

[juba]

Unfortunately I'm not sure this is possible, because the tabs HTML code is itself produced by JavaScript code, so it is not possible to modify its behavior without modifying the package code itself...

[bersbersbers]

I wonder if this JS error has something to do with it:

This is what I get when I open file:///W:/home/bers/test.html#h3b directly (note the anchor).

(I can reproduce the original issue, without any error message in the console, using file:///W:/home/bers/test.html, so it is not necessarily related.)

[juba]

Unfortunately no, it is not related. Your issue allowed me to detect this error, and it should be fixed in rmdformats development version, but it doesn't solve your problem...

[bersbersbers]

I agree - the GitHub version does not have that error, but still has the original issue.

[bersbersbers]

One weird thing is that Chrome and Firefox behave exactly the opposite. Chrome scrolls on clicking the inactive tab, but not the active one. Firefox scrolls on clicking the active tab, but not the inactive one. I wonder if any of these two behaviors is actually the intended one

[juba]

Yes, I can confirm that. One thing I just find out is that if you disable the cards behavior with cards: false, Edge seems to behave in the same way as Firefox. So there should be a link there.

[juba]

Ok, I think i finally fixed it ! Could you please test with the development version to see if the problem is solved for you too ?

[bersbersbers]

Oh, yes! This looks good! Thanks already! I will test this a bit more, but I is already working in the first full document I tried.

For the record, with 02ce84a, the browser location bar no longer updates with tab changes, but I don't actually care about this. (Other people may, especially if the deep-link to a specific tab in their document.) But 02ce84a very nicely stops all kinds of scrolling FF, Edge and Chrome.

[juba]

Yes, I noticed that too, but I don't really think it could be a problem, so I think I'll let it like this.

Closing this issue for now, don't hesitate to reopen if needed. Thanks for your help and patience !