Applying a Webkit Scroll Bar to a specific element on the webpage

I've been attempting to apply the Scroll Bar webkit styling to a particular element but haven't had any success. Despite searching extensively, I have come across 2 threads on Stack Overflow that do not provide a solution.

Most of the available advice suggests using:

.class-name::-webkit-scrollbar { }

However, this hasn't worked for me.

This is a full example of the suggested method (which does not work): http://codepen.io/wrdle/pen/BQYBjN

If you can help, it would be greatly appreciated! :) Thanks

htmlcsswebkit

Answer №1

Your CSS is functioning properly - the issue in your CodePen is that the entire document is scrolling, not just the #container element, which is why its scrollbar isn't visible.

To see the correct scrollbar, add this example CSS:

#container {
  height: 500px;
  overflow: auto;
}

Check out the updated version on CodePen here: http://codepen.io/capitalq/pen/MbQgJv

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to show alternative data from a database in Laravel 8

I am working on a project where I need to display additional data based on the option selected from a dropdown menu populated from a database. Can anyone guide me on how to achieve this using javascript or jquery? https://i.stack.imgur.com/k3WLl.png Belo ...

javascriptphphtmljquerylaravel

Integrate blogger into my website with automatic height adjustment and scrolling functionality

Check out my website here. I've integrated a blogger component into it. Can anyone provide guidance on creating parallel scroll and automatically resizing sections based on the blog's height? Thanks, M ...

htmlcssiframebloggerblogs

How can I create a placeholder in semantic-ui components?

I'm currently utilizing the plugin and facing an issue with displaying the placeholder. Although data retrieval from the database is functioning properly, the placeholder is not being shown. Note:- When I remove the PHP code, the placeholder display ...

javascriptphphtmlhtml-selectsemantic-ui

Is there a way for me to display the image name at the bottom before uploading it, and have a new div created every time I upload an image?

Is there a way to display the image name at the bottom and have it create a new div every time an image is uploaded? I would appreciate any help with this... <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstra ...

javascripthtmljquerycsstwitter-bootstrap

Express app unable to retrieve dropdown menu data using Node.js BodyParser

I am currently working on creating a pug file for a signup form and I'm encountering an issue with the drop-down menu not functioning. How can I properly include my drop-down menu in the body parser? I initially assumed it would be processed with json ...

htmlnode.jsexpress

What is the best way to incorporate multiple Bootstrap templates into an Angular project without causing conflicts between them?

When incorporating a bootstrap template into the admin interface, it is important to consider that its design may vary from the template used for visitors. Mixing multiple styles based on different templates can lead to conflicting styles and can potenti ...

javascriptcssangularbootstrap-4

Tips for creating a scrollable section within a div row using clarity design instead of bootstrap formatting

My current project combines Angular with .NET Core, and I am encountering difficulties in styling one particular component. This component consists of a row with two columns. The first column is empty while the second column contains another row divided i ...

htmlcssbootstrap-4

Looking to showcase elements within an array inside an object using ng-repeat

In this JSON dataset, we have information about various anchoring products. These products include anchors, cleats, snubbers, shackles, and more. When it comes to displaying these products on an HTML page using Angular, make sure to properly reference the ...

javascripthtmlangularjsjsonangularjs-ng-repeat

Placing a JavaScript button directly below the content it interacts with

I am currently working on a button that expands a div and displays content upon clicking. I am facing an issue where I want the button to always be positioned at the bottom of the div, instead of at the top as it is now, but moving it within the parent div ...

javascriptjquerycss

What is the CSS method for styling a color label on an active input box?

I am trying to achieve a specific effect where the label changes color when the input box is in focus. However, my current CSS code does not seem to be working as expected. Can someone please explain why and provide a solution to fix this issue? .test-l ...

htmlcss

Ways to adjust the height of one panel based on the height of surrounding panels

I have a layout with three panels: two on the left side and one on the right. <div class="row"> <div class="col s6"> <div class="panel"> content1 </div> <div class="panel"> ...

javascriptcsspanelmaterialize

Is there a way to leverage the extensive Bootstrap 5 color palette within an Angular application?

Currently working on a project in Angular 12 with Bootstrap 5 and SCSS, I'm facing a challenge in utilizing the new extended Bootstrap 5 color palette such as indigo-300 or pink-200. I'm not sure if I need to import them in a certain way or how t ...

cssangularsasscolorsbootstrap-5

unable to modify background color when mouse hovers in CSS

Recently, I implemented this code to style the navigation bar on my website. However, I encountered an issue where the color does not change when hovering over the links. .nav { list-style-type:none; margin:0; padding:0; overflow:hidden; } ...

htmlcss

What are the steps to integrate mp3 music into my web application?

Does anyone have experience implementing auto-resume mp3 music on a web application so that the music continues to play even when the user changes pages? I would like the music to seamlessly play as the user navigates through my web application. Can someo ...

javascriptphpjqueryhtmljson

What is the best way to incorporate multiple input boxes into a single alertbox for repeated use?

I attempted to use the same alertbox for 3 different input elements by converting it into a class and using getElementsByClassName, but unfortunately, it did not work as expected. Here is what I tried: <input type="text" class="form-control date notif" ...

javascriptphphtml

ways to clear the float on the right side of an image

So I have two images that I am trying to float, like this: img{ float:left; clear:right; } <img src='http://img1.imgtn.bdimg.com/it/u=1005212286,2432746147&fm=21&gp=0.jpg' alt=''><br> <img src ...

htmlcss

Adjust the size of the container DIV based on the content within the child DIV

I have been searching for a solution to my question without success. Here is the issue: I have a DIV that acts as a container for a Post in my project. Inside this post are classes for the poster avatar, name, timestamp, text, and more. The problem arise ...

htmlcsssize

Discover HTML tags

I am currently working on a solution to identify and retrieve the first HTML tag from a given string of HTML. If no tag is found, I aim to return null as the output. An example of a tag would be something like <b>. After exploring various methods wi ...

javahtmlstring

I encountered a difficulty trying to assign a value to @Input decorators in the spec file

While writing a test case for form submission, I encountered an issue where the Input decorator (e.g. station) value is reassigned during form submission. However, when attempting to define this Input value in the spec file, the component.station value is ...

javascripthtmlangularunit-testingjasmine

Guide on retrieving data from two separate tables within a single database using PHP

I am currently working on a shopping website where I have a table called "products" that stores all the product data. Additionally, there is a separate table named "cart" which contains the products added to the cart, including product ID and user ID. On t ...

phpmysqldatabasehtml