Scrollbars break if the starting point of rangeX/rangeY is larger than 0

[lukebitts]

They also break if the ending point of a rangeX/rangeY is lesser than 0.

Example: https://codesandbox.io/s/selecto-116-forked-260hw0?file=/src/InfiniteViewer.ts

Notice the range being:

rangeX: [-2000, -1000],
rangeY: [-2000, -1000]

The scroll area gets constrained correctly, but the scrollbars stop covering the whole width/height of the page. The image shows the problem: I cannot scroll further right or further down.

[daybrush]

ok i'll check it out.

I'll try with a configuration similar to Figma.

44

[lukebitts]

Thanks for checking it out!

Here's some behavior I notice that might be related:

I've forked the demo to test the range [1000,3000]. If you scroll the page, the scrollbars break like I mentioned, but the offset value stays constrained correctly between 1000 and 3000. https://codesandbox.io/s/zoom-forked-izkc5e?file=/src/App.js (You can see the offset values on the left-bar element).

On the other hand when I tested the range [-3000,-1000], the X offset value is incorrectly constrained between [-3000, 0], and the Y value is constrained between [-3000, -410]. https://codesandbox.io/s/zoom-forked-qeju0u?file=/src/App.js

[daybrush]

@lukebitts

infinite-viewers' new version is released. Try it again.

[lukebitts]

Thanks @daybrush !

I've tested with the 0.22.0 version and the problem I reported here (https://github.com/daybrush/infinite-viewer/issues/45#issuecomment-1483689773) was corrected, constraining a range like [-3000,-1000] now works perfectly!

But the scrollbars are still behaving oddly, here's an example:

This red dotted square sits exactly at the middle of the rangeX and rangeY area. I would expect the scrollbar to be at the middle as well:

This is what happens when I scroll fully to the left:

This happens if I scroll a bit to the right (the scrollbar covers the entire length of the screen):

Then its size decreases when I scroll fully to the right:

[daybrush]

@lukebitts

The scroll bar behavior has been changed. When the viewport is completely inside the screen, the scrollbar disappears.

In case 1, if all the viewports are in the screen but there is a scroll bar, can you update the codesandbox? In case of No. 2, No. 3, and No. 4, it is a normal operation screen.

In addition, the scrollbars have been changed so that they do not overlap. try to update

[lukebitts]

Thanks @daybrush!

I finally managed to test version 0.24. I still find the scrollbar behavior to be unexpected: in a viewport larger than the screen, the scrollbar changes size as I scroll. Is this a feature? I usually expect the scrollbar size to remain constant, but I understand if that's not the objective.

But from a "bug" perspective everything seems to be fixed and the scrollbar behaves in a consistent manner

Also the no-overlapping of the scrollbars is really welcome!

edit: there's another issue I'm not sure is a bug: I cannot drag the scrollbar with my cursor from beginning to end, the scroll moves slower than the cursor

[daybrush]

@lukebitts

I finally managed to test version 0.24. I still find the scrollbar behavior to be unexpected: in a viewport larger than the screen, the scrollbar changes size as I scroll. Is this a feature? I usually expect the scrollbar size to remain constant, but I understand if that's not the objective.

This is the feature I intended.

If you want, I'll add it as a prop in a way that limits the scrollbar when the range is set to both sides.

edit: there's another issue I'm not sure is a bug: I cannot drag the scrollbar with my cursor from beginning to end, the scroll moves slower than the cursor

Fixed that issue. Try updating to the new version.

[lukebitts]

I can't say for sure if the issue is fixed, because I'm not sure how you expect it to work for my use case. Having said that the scroll is still slower than the cursor in some cases, I can try to provide another codesandbox example

If you want, I'll add it as a prop in a way that limits the scrollbar when the range is set to both sides.

I would like to see this, but I understand if this is not a use-case you want to support!

[daybrush]

@lukebitts

Would you like to update to the new version?

Also, if you want the same scrollbar as before, try setting useBounceScrollBar to true.

[lukebitts]

Just tested it! I used version 0.28.1

The scrollbar now follows the cursor at the correct speed, but I still get some weird behavior when the viewport is smaller than the screen. When there's a large enough viewport area the scroll works perfectly, but otherwise the scrollbar gets "stuck" halfway.

Here's an example, the blue dotted square is the debug view for the viewport I set on infinite-viewer: (you can ignore the dotted red square) Here I am at the topmost-leftmost area of the file and the scrollbars reflect that correctly.

But then, if I scroll all the way to the bottom, the scrollbar stops halfway: Here I am at the bottom of the file and I cannot scroll further down (which is correct) but the scrollbar does not reflect that.

This is not a universal problem though, if the viewport is large enough the scrollbars works perfectly: