Custom scrollbars in websites – do they make any sense?

Are custom scrollbars still needed today?

The only reason they were needed so far is because they are fugly on Windows. They are always visible and don’t autohide and they just look bad. But I’ve see on youtube that in Windows 10 they changed scrollbars so now they look like on MacOS! That means there’s no point anymore in using scrollbar scripts like perfect-scrollbar, right? Which btw, is anything but perfect, because it never works right with modern frameworks like vue, react etc… And it never will because graphic updates are hard-impossible to track, especially when using effects.

Just to make it clear, I am talking about scrollbars for inner elements, like some list with many items, not the browser window itself. Nobody uses custom scrollbars for the browser window anyway.

Why do scrollbars revert to original scroll distance when mouse is dragged sideways too far?

When dragging the scrollbar using the mouse, the contents of the scrollpane move up and down as the bar moves with the mouse. But if you keep the mouse button held down, and move the pointer sideways for about 100 pixels (tested on Windows machines), the scrollbar goes back to its location before being dragged, and the scrollpane with it. Moving the mouse closer again will make the scrollbar follow the mouse again. Is there any benefit or explanation for this behaviour from a UX point of view?

SharePoint Modern Custom Footer SPFx Customizer – Multiple scrollbars

We have created a custom footer using SPFx application customizer to provide information like social media icons, feedback button, site map (html) etc. This is now occupying more than 90% of content area providing vertical scroll to see the content. We, then using css setting footer div contents position to absolute so that when user scrolls to bottom of page then only footer visible. Problem here is multiple scrollbar appearing which is very annoying. Footer is not placing on bottom of page rather screen bottom – which might be the issue. Any help is highly appreciated !!![enter image description here]1

Make overlay scrollbars?

Is it possible to make an overlay scrollbar?

Basically, I have a parent div with child divs inside. I’d like to make the vertical scrollbar overlay on top of the child divs instead of the scrollbar occupying space in the parent div and pushing the child divs to the left.

I’m planning to make the scrollbar transparent and only show it when the parent div gets hovered.

Is that possible? Please help thanks

Scrollbars for an infinite plane

I’m designing a web application to plan Minecraft builds. Basically, it’s a pixel editor except that each tile has a texture instead of a color. I am targeting desktop browsers, though I would like to keep tablets in mind.

One of my goals is to present the canvas as an infinite plane. (This is a key feature that differentiates this design from existing alternatives. The Minecraft world is infinite, and so declaring a finite size ahead of time doesn’t make sense and is a pointless hurdle. In addition, expanding a pre-sized canvas is annoying.)

The canvas is zoomable, and it must be “scrollable” in both dimensions. The user should be able to view and edit any part of the canvas they like — even a million tiles away from the origin.

Scrollbars do not work perfectly here. The canvas has neither beginning nor end, and the origin point isn’t important to users, so there are no objective reference points. The populated areas of the canvas might serve as useful subjective reference points, and a scrollbar might be useful for navigation within those areas.

I read a great question about infinite scrolling patterns, and although it didn’t address this particular case it was very enlightening. After some consideration, I think that the application needs to support the following:

  • Moving the view to an arbitrary specified point.
  • Moving/zooming the view to include the entire populated area.
  • Precisely moving the view within the populated area and immediately outside it (say, one screenful, a measure that depends on the zoom).

A traditional scrollbar also indicates the size of the view in relation to the entire document, but that doesn’t make sense for us. It could be useful to indicate the size of the view in relation to the populated area, but I’m not sold on that.

Moving to a point or zoom/scrolling to see all content can be implemented using buttons, menu commands, or whatever. The trick is finding an interface for scrolling-like behavior that’s intuitive to use but meets the needs of the infinite plane.

What I’m thinking of at the moment is a sort of “scrub bar”. Visually, it’s a scrollbar (and could be implemented using native widgets). The knob is locked to the center when the user isn’t scrolling. When the user manually moves the knob, it scrolls the view accordingly, and when they release it, the knob snaps back to the center. This allows for precise linear scrolling despite a lack of objective reference points.

As specified, this does not allow the user to scroll an unlimited distance in a single operation. To support this, if the user drags the knob to either extreme end, the canvas could continue scrolling until the user released the knob or moved it away from the end.

Are there any good examples of infinite plane scrolling out there? And does the widget I suggest seem like a reasonable compromise?

Libreoffice and scrollbars

Since I have a 4K display I have changed gtk.css for wider scrollbars, and this seems to generally work (I have also disabled overlay scrollbars). However, librecalc seems incompatible with this – it has a wide scrollbar that looks fine but the region I have to select with my mouse for it to scroll is a narrow part of the vertical scrollbar (the left few millimeters). Is there a solution to this?

I’m also open to suggestions for wide scrollbar themes on xfce so that I dont have to mess with gtk.css.

Details: I am running ubuntu 18.04.2, xfce, greybird accessiblity (I’ve tried others too), libreoffice gtk.css is:

scrollbar slider { /* Size of the slider */ min-width: 16px; min-height: 16px; border-radius: 22px; /* Padding around the slider */ border: 5px solid transparent; }

Thanks in advance.

Vimium/VimFx scroll embedded scrollbars

I recently started to use Vimium in my Chrome browser and VimFx in FF. I found it very useful. But there’s one thing I simply cannot find a way to do.

Basically, when I am scrolling a website, let’s say Wikipedia, then everything is fine, cuz that’s the only one scroll. But i.e. when I listen to some YouTube playlist, I have the main scrollbar of the site, but there’s this tiny little one to scroll the playlist. And I cannot find a way to move that one around.

So my question here is, is there a way to somehow like select scrollbars other than those “main” ones?