Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

Multiple scrollbars in the same css file- is it possible?

Edrol97

Edrol97

Silver Coder
Hi all,

Wondering if the above is possible. The navs and bodies of all of my pages are different and this is possible within css to manage, but if I want to have different scrollbars for each page, how would I do this with the same css? Is it possible?

As always, thank you for taking the time to answer this thread with solutions. It's probably something super obvious, but if I don't ask, I don't learn.

All the best,

Eliot
 
Sort by date Sort by votes
tomliv said:
@Edrol97 It is possible to have different colored scrollbars in supporting browsers. Is this what you are looking to do?

Info here: "scrollbar" | Can I use... Support tables for HTML5, CSS3, etc

A how-to here: Scrollbar styling | CSS and UI | Chrome for Developers
Click to expand...
Not really. I know about browser support but I am more wondering about how to identify different <body> tags to add scrollbars to them. Is it possible for a body to have an ID that would identify it within the css? I've tried this in dev mode but when I upload it to my cPanel it doesn't register in the same way it shows in dev.
 
Upvote 0 Downvote
Edrol97 said:
Not really. I know about browser support but I am more wondering about how to identify different <body> tags to add scrollbars to them. Is it possible for a body to have an ID that would identify it within the css? I've tried this in dev mode but when I upload it to my cPanel it doesn't register in the same way it shows in dev.
Click to expand...
@Edrol97 Yes you could use an ID. Classes would be more appropriate. You should apply the scroll styles on the html element for a custom scrollbar for an entire page:

HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scrollbar Colors</title>
    <style>
        html {
            scrollbar-color: #00ff1a #8213e3; /* thumb color and track color */
            scrollbar-width: thin; /* thin scrollbar */
        }
        body{
            min-height: 200vh;
        }
        p{
            font-family: 'Courier New', Courier, monospace;
            font-size: 1.5rem;
            color: #333;
        }
    </style>
</head>
<body>
    <section>
        <div>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, accusantium. Fuga velit quisquam dicta similique, expedita repudiandae eligendi eaque ipsam placeat doloribus dolorem rem libero obcaecati vel optio error minima. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, accusantium. Fuga velit quisquam dicta similique, expedita repudiandae eligendi eaque ipsam placeat doloribus dolorem rem libero obcaecati vel optio error minima. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, accusantium. Fuga velit quisquam dicta similique, expedita repudiandae eligendi eaque ipsam placeat doloribus dolorem rem libero obcaecati vel optio error minima. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, accusantium. Fuga velit quisquam dicta similique, expedita repudiandae eligendi eaque ipsam placeat doloribus dolorem rem libero obcaecati vel optio error minima. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, accusantium. Fuga velit quisquam dicta similique, expedita repudiandae eligendi eaque ipsam placeat doloribus dolorem rem libero obcaecati vel optio error minima.</p>
        </div>
    </section>
</body>
</html>
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom