Concealing numerous scrollbars with CSS in all web browsers

Struggling to achieve my desired outcome, I'm beginning to question if it's even possible. I have three divs with varying widths based on hover (with simple transitions). The height of these divs always adjusts to 100% of the browser window height using jQuery.

To handle multiple sections of scrollable content, I've used overflow-y: scroll. However, having three scrollbars seems cumbersome, so I'm attempting to remove them. It's straightforward in Chrome by using 

::-webkit-scrollbar { display: none; }
, but other browsers pose a challenge. Suggestions from other sources recommend wrapping the content in a div with overflow: hidden, but this approach disrupts the transitions entirely.

Check out this demo for clarification. Any insights are greatly appreciated!

javascriptjqueryhtmlcss

Answer №1

To hide scrollbars, you can use overflow-y: hidden. If you want the scrollbars to only appear on :hover, you can set it to scroll for the panel when the user hovers over it:

.panel {
    overflow-y: hidden;
}
.panel:hover {
    overflow-y: scroll;
}

It's important to include the default hidden property to prevent panels from scrolling back to the top in the previous examples.

Answer №2

If you hover over the container, the scrollbar will appear

#container .display-panel:hover {
     overflow-y: scroll;   
}

Delete the overflow-y property from display-panel http://jsfiddle.net/9T7ex/1/

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

Is the [] value always populated in the second DropDownList?

After populating two DropDownList in my View, I encountered an issue with the values not updating as expected: <tr> <td class="info_label">City</td> <td>@Html.DropDownListFor(m=>m.User.City,Model.City,"-- Select ...

jqueryasp.net-mvc-3

React: executing function before fetch completes

Whenever I trigger the ShowUserPanel() function, it also calls the getUsers function to retrieve the necessary data for populating the table in the var rows. However, when the ShowUserPanel function is initially called, the table appears empty without an ...

javascriptreactjsmaterial-uifetch

Reorganizing divisions with Dojo

I came across a thread on StackOverflow that was similar to what I'm looking for. jQuery removing an element and renumbering remaining elements However, since we don't use jQuery but instead rely on Dojo, I'm unsure how to achieve the same ...

javascriptdojoiteration

Can the labelDisplayedRows be disabled in the table pagination actions of Material UI?

I am currently working on customizing the table pagination actions in Material UI's table and I need to remove the labelDisplayedRows function. My goal is to only show next/previous icons in the footer without the counter (e.g., 1 of 5). I managed t ...

cssmaterial-uimaterial-table

Implement event listeners for multiple buttons using Handlebar.js templates, but only the final one will be active

For a homework assignment, I am developing a web app that utilizes websockets to receive server messages and then displays them on an HTML page using handlebars.js. One feature I am trying to implement is the ability to delete a message with the following ...

javascripthtmlhandlebars.js

What is the code to incorporate a color using PHP?

Question: Is there a way to indicate approval with green color and decline with red color? I've searched for a solution but couldn't find one. PHP Code: <?php if(isset($_POST['approve'])) { $msg = "Approved"; ...

phphtmlcssdatabase

The HTML 5 video is not functioning properly on an iPad, and the layout of the iPad has black areas on the sides

Having some trouble with an HTML 5 project where the video plays on Chrome and Safari PC browsers but not on iPad. The task at hand is to get it working in portrait mode only, with the video playing when tapped/clicked. <!doctype html> <!--[if ...

javascriptcssipadhtmlhtml5-video

Retrieve the first element of a particular class using jQuery

Currently, I am utilizing jquery to locate the first element with the "error" class using this code snippet: $('#mainDiv input.error:eq(0)') However, it seems that this code only works for input elements. How can I modify it to also work for se ...

jquery

What is the process for developing an interface adapter using TypeScript?

I need to update the client JSON with my own JSON data Client JSON: interface Cols { displayName: string; } { cols:[ { displayName: 'abc'; } ] } My JSON: interface Cols { label: string; } { cols:[ { label:&a ...

javascriptangulartypescript

Is there a lone wanderer in the Ajax reply?

Currently working on a Wordpress project, I encountered an issue with my Ajax call. Upon making the call using jQuery, PHP returns a JSON object. However, the JavaScript response includes an unexpected "0" at the end, causing the decoding of the JSON objec ...

phpjqueryajaxjsonwordpress

Could this be a problem within my recursive function?

Struggling to iterate through a stack of HTML Elements, I attempted to write a recursive function with no success. In the code snippet below, I'm facing challenges in returning a value from an if statement and ultimately from the function itself. Wh ...

javascripttypescript

This content consists of a header, footer, and middle section with an unknown height, allowing

I am attempting to create a webpage with a header and footer div of unknown height (or minimum height) and a scrollable middle content when the content increases. The challenge is to ensure that all three sections fit within the screen. I have tried the f ...

cssresponsive-designfooter

The jQuery .click() function is not triggering when clicked

$("#backButton-1").click(function() { $("#form-2").empty(); $("#form-1").show(); }); I am experiencing trouble with this code snippet. The form-1 element is hidden, and the backButton-1 is created after the end of for ...

javascriptjquery

Vue3: Pinia store data not being received

Having trouble retrieving Pinia data using the Composition API after a page reload? I'm utilizing Vue to parse fetched JSON data. Despite being new to the Composition API, I can't pinpoint what's causing the issue even after going through th ...

javascriptvue.jsvuejs3piniavue-reactivity

Having trouble retrieving a JSON result from a method located in a different namespace

In my project, I have organized my code into separate .js files and namespaces for json requests and actual logic. Despite this organization, I am facing issues with retrieving the result back in my logic layer. var jsonResult = Blah.Data.LoadAggregates( ...

javascriptjqueryajaxjson

In the realm of Typescript Angular, transferring the value of an object's property to another property within the

I'm working with a large TypeScript object and I am hoping to automate certain parts of it to streamline my workflow. myObject = [ { id: 0, price: 100, isBought: false, click: () => this.buyItem(100, 0) } buyItem (it ...

javascriptangulartypescriptobjectautomation

Learn to create customized HTML elements in HTML and control them with JavaScript

I am looking to dynamically create an HTML object and replicate it N number of times using JavaScript. Below is an example of the object I want to generate multiple times on an HTML page: <div class="row"> <div class="column" style="backgroun ...

javascripthtml

Creating a full-screen loading animation that appears when a button is clicked is a great way to enhance user experience. This animation can flow seamlessly from right to left before disappearing, providing a visually engaging transition for users as they

Despite anticipating more negative responses than positive ones, I believe that even one correct answer outweighs it all! So, I'm trying to figure out how to create a loading animation that covers the entire screen whenever a button on the navigation ...

javascripthtmlcssreactjsdom

When the Next js page loads, it briefly displays a 0 at the top for a moment before loading the rest

When my nextjs app loads a page, there is a momentary appearance of a 0 in the top left corner. This happens even if I am fetching data from Sanity CMS using getStaticProps and returning content. Interestingly, I have observed that simply returning an empt ...

javascriptnext.js

Diversify Your Color Palette with Sass Color Functions - Utilize Multiple Functions

Looking to make adjustments to a HSL color in one go, including hue, saturation, and lightness. I've tried applying each adjustment individually like this: $color: hsl color code; $new-color: adjust-hue($color, -1); $new-color: lighten($color, 20%); ...

csscolorssass