Css scrollbar top and bottom

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-overflow] Positioning Scrollbars on top or left of container #1293

[css-overflow] Positioning Scrollbars on top or left of container #1293

Comments

From time to time, I have encountered cases where having a horizontal scrollbar at the top or left would be more helpful than having it at the bottom. For example, consider a long table that forces a vertical scrollbar. Also, it has so much content that the space required on horizontal axis is more than what viewport width can provide.

Or when something like bootstrap responsive table is needed, which has a horizontal scroll in smaller screen-size.

A lot of times, due to the amount of vertical content, the presence of a horizontal scrollbar is not known to the end user or they have to scroll further down where they can’t see table headers anymore. As a result, users don’t realize that the content can be scrolled.

The situation is worse for mobile browsers because they generally have overlay scrollbars which only appear when you at least tap on the content.

Chrome on phones at least give a flash as to which containers have scrollbars and then it goes away.

In these sort of cases and others like (RTL languages) wouldn’t it be great to have an option to change the position of the scrollbars?

Right now, the trick that I use is something like this.

.parent < transform: rotateX(180deg); overflow-x: auto; > .child < transform: rotateX(180deg); >

This way, the horizontal scrollbar appears on top. This hack however isn’t all that great and has it’s own problems.

I know that scrollbar is a browser chrome thing and it’s still not allowed to style by end users for reasons. But can there be properties that at least let the users set the position of scrollbars?

.parent< scrollbar-x-position: top; /*either top or bottom, default is bottom or dir based*/ scrollbar-y-position: left; /*either left or right, default is right or dir based*/ >

I’ll be happy to know the reasons if this was thought before and dropped.

The text was updated successfully, but these errors were encountered:

Right. Browsers should probably show the scrollbar or some sort of cue to let users know that an element is scrollable and in which direction. If they do that, these properties won’t be needed.

I am, however, wondering how difficult it is to get the browsers to even think about it. Also, on smaller devices, they try to maximize the space for content by overlaying scrollbars and hiding them when not needed. What the alternatives can be.

Is there something that I can do on my part to trigger at least a discussion on it?

hope it could have a good solution

@praveenpuglia I guess, file bugs against the browser vendors with some good motivating examples?

I do think dictating scrolling UI should be out-of-scope for the CSS specs.

For overlay scrollbars, I would tend to agree that the UA should be free to be smart and put them on the more useful side if it wants to. We probably do not want that for scrollbars that consume space, because that putting the scrollbar on the left side instead of the right one would shift the content horizontally, potentially putting it out of visual alignment with content outside the scrollable area.

I think it may be interesting to consider potential interactions with scrollbar-gutter (defined in level 4), since that can be used to reserve space on both sides.

On Mar 6, 2018, at 2:14 AM, Florian Rivoal ***@***.***> wrote: For overlay scrollbars, I would tend to agree that the UA should be free to be smart and put them on the more useful side if it wants to. We probably do not want that for scrollbars that consume space, because that putting the scrollbar on the left side instead of the right one would shift the content horizontally, potentially putting it out of visual alignment with content outside the scrollable area.

NeXT desktop had scroll bars on the left. The OS really can put them wherever it wants. https://m.imgur.com/GqVO6bZ

My first thought on this is that in most cases, it’s not worth the confusion for a user to put scrollers on the top/left, when convention is bottom/right. And I’d hope standards would emphasis the usability afforded by familiarity in this case.

Second thought is that this issue primarily arises from poorly conceived layouts in the first place. This is mostly an issue if a nested scroller (not the scrollers content) is wider/taller than the scroller it is within. Which I agree causes poor usability, but the solution might not be to move scrollbars to unintuitive areas of their scrollport.

A request for «sticky» scrollbars has been brought up previously, #2252, addressing a similar problem, but its ask, I believe, would make scrollbars behave similar to the sticky position scheme against the edges of the scrolling elements scroll parent. Which I *think, is a more desirable solution than the request here, even if I think it could sometimes have strange scrollbar visuals. Think when a horizontally scrollable table first scrolls into the viewport it’s bottom sticking scrollbar would move in at the top edge of the table, though «mounting» to the bottom edge of the viewport until reaching the bottom edge of table?

All in all, I’m guessing internal scrollers best practice should follow a rule of never being larger, in either axis, than the scroller (often viewport, using max-width/max-height with vw/wh) within which they are nested.

Источник

Guide to styling CSS scrollbars

The default browser scrollbar works fine in most cases. However, leaving it as is can make even the most beautiful websites look incomplete and unpolished. By styling the scrollbar, you can create a more visually appealing site that better aligns with your brand or design. In this tutorial, we’ll explore a few different ways to style CSS scrollbars.

Introduction to scrollbars

The scrollbar is a frequently overlooked element in web design. While it may seem like a small detail, it plays an essential role in website navigation. The default scrollbar is often dull and might look out of place, detracting from the overall aesthetics. Fortunately, you can easily customize the scrollbar using CSS. To do so, you’ll need to write two sets of CSS rules to cover Webkit browsers, like Chrome, Edge, Safari, and Firefox.

Before diving into the code, let’s make sure we understand the structure of a scrollbar. Knowing this is helpful when styling it with CSS because you can use different properties to target specific parts of the scrollbar. Below are the elements that make up a scrollbar:

• Thumb: The movable part of the scrollbar that represents the current position of the content. It can be clicked and dragged to scroll the content up or down
• Track: The area of the scrollbar that the thumb moves along. It represents the entire length of the content
• Arrow buttons: Located at the top and bottom of the scrollbar track, the arrow buttons can be clicked to scroll the content
• Scrollbar borders: The lines that surround the scrollbar element
• Scrollbar corner: The intersection between the vertical and horizontal scrollbars when both are present

Styling scrollbars in Chrome, Edge, and Safari

Webkit browsers allow scrollbar styling using pseudo-elements like :: -webkit-scrollbar , ::-webkit-scrollbar-button , ::-webkit-scrollbar-thumb , ::-webkit-scrollbar-track , and more. Each of these targets different parts of the scrollbar, as listed above. The CodePen below shows an example of a styled scrollbar using the pseudo-elements above:

In the code above, we’ve displayed both the vertical and horizontal scrollbars, but in most cases, we’d only display one. To do so, we can modify the overflow property, which is responsible for the visibility of the scrollbar, to either overflow-x or overflow-y , depending on which axis we will display the scrollbar. However, for the example above, this wouldn’t be enough unless we make the image responsive by setting its width and height to 100% .

Scrollbar pseudo-class selectors

To create a more customized design, you can target specific elements of a scrollbar and apply styles to them by adding a pseudo-class to each pseudo-element. Below are some of the most common pseudo-classes:

• :horizontal : Used to style the horizontal scrollbar differently from the vertical scrollbar. For example, you can set a different width or color for the horizontal scrollbar
• :vertical : Used to style the vertical scrollbar differently from the horizontal scrollbar
• :decrement : Applies to the arrow buttons at the beginning of the scrollbar. It is used to style the decrement button or the up arrow for a vertical scrollbar and the left arrow for a horizontal scrollbar
• :increment : Applies to the arrow button at the end of the scrollbar. It is used to style the increment button or the down arrow for a vertical scrollbar and the right arrow for a horizontal scrollbar
• :start : Applies to the first buttons and first track piece of the scrollbar, which are at the top or left side of a vertical or horizontal scrollbar, respectively
• :end : Applies to the last track piece of the scrollbar, which are at the bottom or right side of a vertical or horizontal scrollbar, respectively

Below is an example that uses all the pseudo-classes above except :horizontal to give the vertical scrollbar a different look:

The example below uses the :horizontal pseudo-class to insert a shadow onto the horizontal scrollbar’s track:

While the Webkit specifications for styling a scrollbar work fine at the time of writing, W3C has officially abandoned this specification and it is expected to be phased out gradually.

Styling scrollbars in Firefox

Firefox doesn’t offer any advanced styling methods like the Webkit browsers. At the time of writing, only scrollbar-width and scrollbar-color are available, which is the standard as specified by W3C CSS Scrollbars. These properties can be used to style a scrollbar’s width, thumb, and track color:

Styling scrollbars for more cross-browser support

When styling a scrollbar, combining the Webkit and W3C CSS Scrollbars specifications is recommended to cover more browsers:

body < scrollbar-width: thin; scrollbar-color: #4d7fff #ddd; >body::-webkit-scrollbar < width: 10px; height: 10px; >body::-webkit-scrollbar-thumb < background: linear-gradient(to bottom right, #4d7fff 0%, #1a56ff 100%); border-radius: 5px; >body::-webkit-scrollbar-track < background-color: #ddd; border: 1px solid #ccc; >body::-webkit-scrollbar-button

In WebKit browsers, rules that aren’t recognized will be ignored, and the browsers will apply the -webkit-scrollbar rules. On the other hand, in Firefox browsers, rules that aren’t recognized will be ignored as well, and the browsers will apply the CSS scrollbars rules. Therefore, the scrollbar will retain its styling in more browsers. Although the downside is that there are no advanced styling methods in Firebox like in Webkit, you might be able to style the scrollbars to look exactly the same.

Conclusion

Styling a scrollbar makes a site look more polished. It can also help differentiate a brand or product by incorporating its color scheme or logo into the scrollbar design. However, it is recommended not to style your scrollbar too far from its original look and feel so as not to make it unfamiliar to users and reduce the user experience. I hope you enjoyed this article, and be sure to leave a comment if you have any questions. Happy coding!

Is your frontend hogging your users’ CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.https://logrocket.com/signup/

LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web and mobile apps — Start monitoring for free.

Источник