[css-scrollbars] is it possible to have a position: sticky horizontal scrollbar?

[o-t-w]

I have a site with lots of gigantic data tables and user testing shows it is often not obvious to users that the table can scroll sideways. We would like to show a horizontal scrollbar to the user to make this more obvious. The tables are both wide and long, so this scrollbar is normally below the fold. Is there any way to do this with current CSS? If not, it could be a useful addition.

[vicols92]

You can create a custom progressbar that checks the width of the element. And make it always visible.

Here is the code for mine. Altough this is watching the height. Not the width.

<progress id="progressbar2" value="0" max="100"></progress>

jQuery(document).ready(function( $ ) {

    var l = $('#progressbar2');

    if (l.length >= 1) {
    $(window).scroll(function () {
        var position = window.pageYOffset;
        if (position > 100) {
            $('#progressbar2').css('opacity', '1');
        } else {
            $('#progressbar2').css('opacity', '0');
        }

        var s = $(window).scrollTop(),
            d = $(document).height(),
            c = $(window).height();

        var scrollPercent = (s / (d - c)) * 100;
        var position = scrollPercent;

        $("#progressbar2").attr('value', position);
    });

    }

});

[tabatkins]

Interesting usecase. Refiling against the Scrollbars spec, as there's nothing stickypos itself needs to do here.

[frivoal]

This seems like something UAs could do as a quality of implementation thing. But if they do not, maybe we should empower authors to take care of it themselves. Agenda+ to discuss what approach we want to take here.

[css-meeting-bot]

The CSS Working Group just discussed stick scrolbars.

The full IRC log of that discussion

<fantasai> Topic: stick scrolbars
<fantasai> github: https://github.com//issues/2252
<fantasai> Rossen_: Asking if possible to have position:sticky horizontal scrollbar
<TabAtkins> fantasai: this issue is a clear case of an unofrutnatue user situation
<TabAtkins> fantasai: Very large code block, with overflow:scroll so you can scroll horizontally, but it's also tall enough that the horizontal scrollbar is off the screen
<TabAtkins> fantasai: Person trying to read has to scroll down to reach the scrollbar, scroll horizontally, then scroll up to see the content
<TabAtkins> fantasai: Which is a very bad UX
<TabAtkins> fantasai: So wondering if there's a way to make a horizontal scrollbar stay "above the fold"
<TabAtkins> fantasai: florian and i discussed this; you can't just position:sticky the scrollbar (it doesn't exist)
<TabAtkins> fantasai: Maybe we can do something else
<smfr> q+
<TabAtkins> fantasai: Or maybe it's just quality-of-implementation, and browsers could handle this themselves
<fantasai> smfr: seems only case for ...
<fantasai> TabAtkins: No, if the box is tall enough, this is a problem
<fantasai> smfr: That's 2 separate scrollers right? document scroller and inner scroll container
<fantasai> TabAtkins: right, but document scroller isn't caausing it
<fantasai> TabAtkins: the problem is the inner scroller is too tall to be visible within outer scroller
<fantasai> smfr: I understand the problem
<fantasai> smfr: quality of implementation seems difficult
<fantasai> smfr: UA wouldn't know whether to add sticky scrollbar, might obscure some other content
<fantasai> smfr: Other solution might involve...
<fantasai> smfr: need to think about it
<fantasai> Rossen_: maybe continue conversation back in issue, come back to it next week or afterwards
<florian> ε-present+