Minimum scrollbar height

[aeharding]

Hi there!

Love this project. The scrollbars work quite well!

I have one question in a new scroll area I'm trying to implement scrollbars in.

The scroll area is small, but the scroll content is large. The scroll bar is only 2px tall. (Note: Mac's native scrollbar has this "min scrollbar height" feature and it is ~20px tall in my situation.)

Would it be possible to make the scrollbar have a minimum height (maybe up to 1/2 the scroll area height so you can still scroll if the scroll container is really small for some reason).

I started tinkering with the scrollbar height compute function, and it works, but the scrollTop isn't computed properly. Any help would be greatly appreciated. 😀

        function computeBarHeight(el){
            var state = getState(el);
            if (state.visibleArea >= 1) {
                state.barHeight = 0;
            } else {
                // Scrollbar should try to be >= 20px tall (unless scroll container is < 40px)
                state.barHeight = Math.min(
                  state.el2.clientHeight / 2,
                  Math.max(
                    state.el2.clientHeight * state.visibleArea,
                    20
                  )
                );
            }

Thanks Alex

[DominikSerafin]

Hey @aeharding, I'm really happy that you find Vuebar useful 😃

This actually is kinda important feature/improvement. I'll get to it as soon as possible for me.

Thanks

[nickensoul]

Thanks for the your work at first! About this issue, can I ask you for some future requests?

1. it will be very helpful to add some options to the directive' settings like barMinHeight and barMaxHeight, so we can set min, max and fixed (if both are exist) height for the bar. Just because we are all have to work in designers' borders.
2. instead of computing properties to the vb-dragger, I believe, it's more usable to apply them directly to vb-dragger-styler. That's will allow to create a high-grade scroll bar. Thanks again!

[DominikSerafin]

Hey @nickensoul, thanks for the feedback =)

When I get to implementing min height of scrollbar then I'll include barMinHeight customization option for sure.

As for second point - I assume you want to create a full height "pane" along which the dragger is moving? If yes, then I also have plans to add a new parent element to vb-dragger which will act like that "pane". Without removing vb-dragger-styler.

[DominikSerafin]

Hey @aeharding @nickensoul

To introduce minimum height and maxium height I'll need to rewrite some mouse tracking code and it's no that trivial actually to make it perform well.

That's why these features will be introduced in the 2.0 version of Vuebar some time in future. https://github.com/DominikSerafin/vuebar/projects/1

[Bowens20832]

Just apply a min-height to your css...

.vb > .vb-dragger{
    min-height: 30px;
}

I had the same problem on large divs, and this is currently working for me.

[DominikSerafin]

@Bowens20832 that approach had some problems the last I've tested it. I think the scrollbar wasn't completely "touching" bottom of the scrollable container - like it would normally do.

But... I'm working on 2.0 version of Vuebar. And some of you that are more curageous can already try to use the development version of it: https://github.com/DominikSerafin/vuebar/tree/development

Lots of demos in docs/demotests.html

It has proper support for min and max height of scrollbars and generally works alright.

[jhlee8804]

Please see my codes :)

https://github.com/jhlee8804/vuebar/commit/621b66bd154cc03dc60e381342cc3614bbf882c3

[mateuszlewko]

@jhlee8804 It generally works quite ok, however bar doesn't move right away from the top, when it is small (long content, short view). Edit: Actually it doesn't work correctly when content height is close to view height. In that case scrollbar doesn't move to the bottom (only to half of available space).

[jhlee8804]

@mateuszlewko Thanks your feedback. I fixed it :) https://github.com/jhlee8804/vuebar/commit/f91bd0553009fc1fab28de9f35c480efeb871269#diff-b1c909ef74d81e1f32c801d0bb224ea5 https://github.com/jhlee8804/vuebar/commit/c3d0dfc57476075e010584785d7193594d493a21#diff-b1c909ef74d81e1f32c801d0bb224ea5

[trandaison]

Hi @DominikSerafin, Any update about this feature?

[DominikSerafin]

@trandaison the situation haven't changed from my last comment: https://github.com/DominikSerafin/vuebar/issues/11#issuecomment-378717591

[alorenc]

The @jhlee8804 solution has a slight error.

When the bar is dragged from top to bottom and vice versa. Then the scrollTop property has the wrong height. Because there is no reset condition in the computeScrollTop() function.

function computeScrollTop(el){
    var state = getState(el);
    var multiplier = state.el2.scrollHeight/state.el2.clientHeight;
    state.scrollTop = state.barTop * multiplier;

    var barHeight = state.el2.clientHeight * state.visibleArea;
    if (barHeight < state.config.barMinHeight) {
        var restOfScrollBarHeight = (state.config.barMinHeight - barHeight) * multiplier;
        state.scrollTop += restOfScrollBarHeight;

        if (state.scrollTop <= restOfScrollBarHeight) {
           state.scrollTop = 0;
        }
    }
}

It works for me, I tested on content from 1.500px to 60.000px