Double barre de défilement
Solved
zacreur
-
zacreur -
zacreur -
Hello,
First of all, I've been self-training in HTML and CSS for a month and a half.
I'm facing an annoying problem, it's all in the title, I have a double scrollbar.
I wanted to customize one, and now I'm stuck with the default scrollbar plus the one I created, but I still can't get rid of the default one.
I've tried all sorts of things like
overflow: hidden
overflow-y: hidden
But the issue is that it removes both of my scrollbars. To be more precise, it removes the default scrollbar, my created scrollbar is there but unusable, just like scrolling down.
Thanks in advance to anyone who can find a solution because I've been stuck on this for hours and I'm running out of ideas. I uploaded the photo on OpenClassrooms if anyone is interested.
https://openclassrooms.com/forum/sujet/double-scrollbar
Have a good day!
First of all, I've been self-training in HTML and CSS for a month and a half.
I'm facing an annoying problem, it's all in the title, I have a double scrollbar.
I wanted to customize one, and now I'm stuck with the default scrollbar plus the one I created, but I still can't get rid of the default one.
I've tried all sorts of things like
overflow: hidden
overflow-y: hidden
But the issue is that it removes both of my scrollbars. To be more precise, it removes the default scrollbar, my created scrollbar is there but unusable, just like scrolling down.
Thanks in advance to anyone who can find a solution because I've been stuck on this for hours and I'm running out of ideas. I uploaded the photo on OpenClassrooms if anyone is interested.
https://openclassrooms.com/forum/sujet/double-scrollbar
Have a good day!
2 answers
Hi,
without seeing your (complete) code, it's hard to say anything...
How is the custom scrollbar made, for example?
The code you are showing (use the code tags from the forum next time, it will be clearer) is incorrect, so it's normal that it doesn't work:
CSS properties are written in the format
property-name: value;
So:
It can't work otherwise.
The most common example of a custom scrollbar relies on specific rules for different browsers and a bit of JavaScript (more specifically jQuery). These rules are not standardized, so you need to specify those that are specific to each browser (if they exist) like for webkit as a prefix for Chrome and Safari:
complete article presenting plugins (but quite old, so there are better ones now)
https://www.ipgirl.com/4252/barre-de-defilement-personnalisee-en-css.html
and for Firefox:
https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
Note the 'experimental' indication on the official Mozilla site.
The best solution, in my opinion, is to either create your own cross-browser scrollbar (or use a script that does the same thing) with CSS and a bit of JavaScript, or to do nothing and improve the design.
Indeed, using a complicated script for an experimental result (and destined to change with the evolution of the web) doesn't seem like a good idea to me. Especially if you’re not familiar with programming yet, it will be complicated and you'll end up doing rather dubious things (at least quite complex to get a rather unsatisfactory result) rather than going through cleaner methods and ways based on good practices.
Customizing scrollbars is indeed not ideal for now (on the CSS side), but it also stems from the fact that it helps users clearly identify a navigation tool, so it's best reserved for very specific cases to avoid losing ergonomics and ensuring that users know immediately what they need to interact with to view the site content.
without seeing your (complete) code, it's hard to say anything...
How is the custom scrollbar made, for example?
The code you are showing (use the code tags from the forum next time, it will be clearer) is incorrect, so it's normal that it doesn't work:
CSS properties are written in the format
property-name: value;
So:
overflow: hidden; overflow-y: hidden; /*which is useless here anyway since overflow combines overflow-x and overflow-y*/
It can't work otherwise.
The most common example of a custom scrollbar relies on specific rules for different browsers and a bit of JavaScript (more specifically jQuery). These rules are not standardized, so you need to specify those that are specific to each browser (if they exist) like for webkit as a prefix for Chrome and Safari:
complete article presenting plugins (but quite old, so there are better ones now)
https://www.ipgirl.com/4252/barre-de-defilement-personnalisee-en-css.html
and for Firefox:
https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
Note the 'experimental' indication on the official Mozilla site.
The best solution, in my opinion, is to either create your own cross-browser scrollbar (or use a script that does the same thing) with CSS and a bit of JavaScript, or to do nothing and improve the design.
Indeed, using a complicated script for an experimental result (and destined to change with the evolution of the web) doesn't seem like a good idea to me. Especially if you’re not familiar with programming yet, it will be complicated and you'll end up doing rather dubious things (at least quite complex to get a rather unsatisfactory result) rather than going through cleaner methods and ways based on good practices.
Customizing scrollbars is indeed not ideal for now (on the CSS side), but it also stems from the fact that it helps users clearly identify a navigation tool, so it's best reserved for very specific cases to avoid losing ergonomics and ensuring that users know immediately what they need to interact with to view the site content.
Hello, thank you for your response.
As I mentioned, I also sent my question to Openclassroom.
The person who replied to me made the same comment as you, which is to look at the code, and he suggested using Js Fiddle.
It was by using that tool that the software pointed out some of my errors, so I proceeded to correct them, and that’s how my problem was resolved.
Whatever happens, thanks again for your response.
Best regards!
As I mentioned, I also sent my question to Openclassroom.
The person who replied to me made the same comment as you, which is to look at the code, and he suggested using Js Fiddle.
It was by using that tool that the software pointed out some of my errors, so I proceeded to correct them, and that’s how my problem was resolved.
Whatever happens, thanks again for your response.
Best regards!