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

Showing the SQL table data output

Attempting to present a new table based on the SQL query result. Below is the initial table code shown when the user first loads the page. TABLE: <form action="walkthroughs.php" method="POST"> Platform: <input type="text" name="platform" ...

phphtmlmysql

Achieving left alignment for Material-UI Radio buttons: Float them left

Click here to view the demo https://i.stack.imgur.com/Yt4ya.png Check out the demo above to see the code in action. I'm currently struggling to align the radio buttons horizontally, wondering if there's an easier way to achieve this using Mater ...

javascriptcssmaterial-designmaterial-uistyling

Adjust the image size without losing sharpness

I'm currently working on a web application for Minecraft and I am looking for a way to resize someone's skin without losing quality. I believe javascript might be the solution to this issue. ...

javascriptcssimageweb-applicationsminecraft

Troubleshooting: Why isn't External CSS Functioning Properly in Broadleaf

I have encountered a question regarding the use of a custom email template in broadleaf. It seems that I am unable to apply an external CSS file and can only use inline styles. Is this normal behavior, or am I missing something? Below is how I am attempti ...

cssspringbroadleaf-commerce

Unable to send messages through contact form - Issue with HTML/CSS

I had successfully achieved the desired outcome before, but now I am facing difficulties replicating it. The linked image displays my intended result versus what is currently happening. https://i.stack.imgur.com/QUCuN.png What could be causing this issue ...

htmlcss

Create a URL hyperlink using javascript

I am looking to create a link to a page that updates its URL daily. The main URL is where X represents the day of the month. For example, for today, July 20th, the link should read: In my JavaScript section, I currently have code that retrieves the cur ...

javascripthtml

Can a phone without GPS capability still perform geocoding functions?

Is it possible to obtain the location through visiting a website? I am aware that HTML5 allows for this, but will it be compatible with mobile phones? ...

htmlgeocoding

Error: The hyperlink in the response from the Ajax request is not functioning as expected

I've exhausted all the suggestions for fixing this issue, but nothing has worked so far. Currently, my setup involves making an AJAX call to a PHP page called livesearch.php from the index page in order to retrieve live search results. <html> ...

javascriptphpjqueryhtmlajax

Inserting a PHP variable ($username) into a form field

<form method="POST"> <h1>Contact Us</h1> <span><h2 class="required">*Required</h2></span> <div class="input-group"> <label class="sr-only">First Name</label> <input class="text" ...

phphtml

Adding flair to a fresh element and then removing it upon its inception

I'm working with a JavaScript code that creates a new element when a button is clicked. I have a question about it. Here's the JavaScript code snippet: var comment = document.querySelector("#AddComment"); var req = new XMLHttpRequest(); if(comm ...

javascripthtmlcssajax

What is the best way to conceal an HTML element on a particular page that is already styled as (visibility: visible), but only if its child has a specific class assigned to it?

I have a grid of content and posts displayed on multiple webpages. Users can select specific items from the grid to navigate to more detailed information on another page. Each webpage has its own grid which I want to filter based on a specific class. The ...

javascripthtmljquerywordpresslearndash

The background appears only in the upper portion of the screen upon refreshing the table

Whenever the user clicks on the edit button or when the page is initially loading, a backdrop appears and disappears once the modal is displayed. The backdrop effectively highlights the entire page. However, after updating my table with data via Ajax witho ...

htmlcssajaxtwitter-bootstrap

Achieving a responsive card layout in Reactjs with Bootstrap by displaying four cards in a single row

const DisplayCategory = () => { const history = useHistory(); useEffect(() => { axios.get('http://localhost:8080/products', { headers: { Authorization: "Bearer " + localStorage.getItem("token&q ...

htmlcssreactjs

Submitting values in URI through an HTML form

Hey there, I'm really in need of some assistance with this issue that's been driving me crazy... :) So, I'm working on a project using Symfony2 and AngularJS: <form class="navbar-form navbar-right" role="form" action="" method="post"> ...

htmlangularjsformssymfonyform-submit

Trouble with table class functionality persists following insertion of SQL database

After successfully setting up the table layout and connecting it to a database, I encountered an issue with the class not working as expected. Despite being able to retrieve records and display them in the table, the desired layout was missing. <bo ...

phphtmlcsssqlclass

Combining cells through the utilization of JavaScript

I've searched for ways to merge cells in a table using JavaScript but haven't been able to find any code that works. Is there a specific approach I can follow to implement cell merging like in MS-WORD tables? Your advice would be greatly apprec ...

javascripthtmlmerge

Easily input new information into your MySQL database with just a click by utilizing a link through PHP and HTML

Is there a method to modify information in a MySQL database when a user clicks on a hyperlink? I'm developing a voting application. It enables users to save questions for immediate use or later use. When the user is viewing their created questions, t ...

phphtmlmysql

Substitute the information in the table with new data

I am working with an HTML table that has 5 columns, one of which contains dates. I need to convert the date format only if the data is not empty. To achieve this, I am utilizing moment.js for date formatting. While the date format conversion works perfect ...

javascripthtmljquerycss

Tips for retrieving the selected option from a dropdown menu

I have a dropdown menu with checkboxes that can be selected using SumoSelect. Here is the markup for the dropdown menu: <select multiple="multiple" name="somename" id="uq" class="select"> <option value="volvo">Volvo</option> <o ...

javascriptjqueryhtmlcsssumoselect.js

Highcharts' labels on the x-axis do not automatically rotate

One issue I am facing is that my custom x-axis labels on the chart do not rotate upon window resize. I would like to have them rotated when the screen size is less than 399px. Check out the code here $(function () { $('#container').highchart ...

javascriptjquerycsshighcharts