If we have this div:
<div style="overflow:auto;"></div>
Is there a way to ensure that the scrollbars are only visible when the mouse hovers over the div?
I'm trying to achieve a similar effect to Facebook's top-right corner, where the scrollbars appear only when needed.
To create a hidden overflow that becomes visible on mouse hover, you can use the following CSS code snippet. The 16px padding is included to prevent text from re-wrapping when the scrollbar appears.
div.myautoscroll {
height: 40ex;
width: 40em;
overflow: hidden;
border: 1px solid #444;
margin: 3em;
}
div.myautoscroll:hover {
overflow: auto;
}
div.myautoscroll p {
padding-right: 16px;
}
div.myautoscroll:hover p {
padding-right: 0px;
}
You can test this functionality in action by visiting this fiddle. Make sure to adjust the window size to see the full effect.
Last updated on October 23, 2014:
Due to variation in how scrollbars are displayed across systems and browsers, you may need to tweak the 16px padding to suit your setup. Some systems like newer Mac OS versions only show scrollbars when scrolling begins, which could affect this technique. In such cases, consider leaving the overflow as auto or adjusting based on your specific requirements.
The challenges presented by having changing overflow in an answer are numerous. These include inconsistent width of the inner block, reflow triggers, the necessity for additional code to handle paddings, and the potential interference with keyboard and other interactions when not hovered over.
An alternative approach that avoids reflow entirely involves utilizing the visibility property along with nested blocks:
.scrollbox {
width: 10em;
height: 10em;
overflow: auto;
visibility: hidden;
}
.scrollbox-content,
.scrollbox:hover {
visibility: visible;
}
A live demonstration showcasing this method can be found here: http://codepen.io/example/pen/ABC123
Another advantage of using this technique is the animatability of the visibility property. By adding a transition to it as shown in the second example on the provided pen, the user experience is enhanced. The scrollbar does not immediately appear upon hover but smoothly transitions, preventing users from accidentally missing it while navigating through elements.
Experiment with using the :hover selector to style a div
#element { background-color: blue; }
#element:hover { background-color: green; }
I encountered a similar issue and attempted various solutions listed above to no avail. After conducting extensive research, I found a resolution that worked for me. Simply insert these lines into your CSS file.
div.myautoscroll {
height: 40ex;
width: 40em;
overflow: hidden;
border: 1px solid #444;
margin: 3em;
}
div.myautoscroll:hover {
overflow: auto;
}
div.myautoscroll p {
padding-right: 16px;
}
div.myautoscroll:hover p {
padding-right: 0px;
}
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
I discovered that on Mac OSX Lion and later versions (I am using Yosemite), scrollbars are automatically hidden to enhance the appearance. The provided code overrides this default setting and restores the scrollbar's visibility. By incorporating the CSS modification to change the overflow to scroll upon hovering, users on newer Mac OSX systems can achieve the desired outcome. You can view an example in this fiddle (not created by me but where I obtained this solution). http://jsfiddle.net/simurai/UsvLN/
I devised this clever solution which involves using a negative margin to hide the vertical scrollbar.
.hidden-scrollbar {
padding-right: 50px;
margin-right: -25px;
overflow-y: auto;
}
.hidden-scrollbar.hover-scrollbar:hover {
padding-right: 25px;
margin-right: 0;
overflow-y: auto;
}
LESS mixin
.hidden-scrollbar(@padding) {
padding-right: 2 * @padding;
margin-right: -@padding;
overflow-y: auto;
&.hover-scrollbar:hover {
padding-right: @padding;
margin-right: 0;
}
}
NOTE: @padding should be at least the scrollbar width (e.g. 25px)
To implement this, simply add the provided LESS/CSS code and assign the appropriate class to the element in need of a trimmed scrollbar.
Instead of adjusting margins/padding or visibility, a different approach would be to set the color as transparent and then restore it on hover.
.mydiv::-webkit-scrollbar-track{
background-color: transparent;
}
.mydiv::-webkit-scrollbar-thumb{
background-color: transparent;
}
.mydiv:hover::-webkit-scrollbar-thumb{
background-color: #a0a0a0;
}
.mydiv:hover::-webkit-scrollbar-track{
background-color: #e1e1e1;
}
To achieve a hidden overflow-y in the normal view using css, simply add overflow-y:hidden. Then, for the hover event, you can add overflow-y:auto.
If you prefer to use jQuery, utilize the hover event.
Code Snippet:
jQuery(".main_panel").hover(
function() {
jQuery(this).addClass("show_cont");
},
function() {
jQuery(this).removeClass("show_cont");
}
);.main_panel {
width: 300px;
height: 200px;
display: block;
position: relative;
margin: 0 auto;
overflow: hidden;
}
.limt {
padding: 0;
display: inline-block;
width: 90%;
margin: 0;
}
ul.limt li {
display: inline-block;
width: 100%;
font-size: 18px;
line-height: 28px;
}
.show_cont {
overflow-y: auto;
}<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="main_panel">
<ul class="limt">
<li>Curabitur aliquet quam id dui posuere blandit.</li>
<li>Curabitur aliquet quam id dui posuere blandit.</li>
<li>Curabitur aliquet quam id dui posuere blandit.</li>
<li>Curabitur aliquet quam id dui posuere blandit.</li>
<li>Curabitur aliquet quam id dui posuere blandit.</li>
</ul>
</div>Check out this clever CSS trick!
.c-scroller {
overflow: hidden;
height: 90vh
}
.c-scroller-content,
.c-scroller:hover,
.c-scroller:focus {
overflow: auto;
}<div class="c-scroller">
Item 1<br />
Item 2<br />
Item 3<br />
Item 4<br />
Item 5<br />
Item 6<br />
Item 7<br />
Item 8<br />
Item 9<br />
Item 10<br />
Item 11<br />
Item 12<br />
Item 13<br />
Item 14<br />
Item 15<br />
Item 16<br />
Item 17<br />
Item 18<br />
Item 19<br />
Item 20<br />
Item 21<br />
Item 22<br />
Item 23<br />
</div>Currently, I am utilizing Material UI in React and encountering an issue with the spacing between an <a tag and some text both before and after it. The lack of space is causing them to merge together. <Typography style={{ fontSize: 14, textAlig ...
Is there a way to create a dynamic grid of squares in Bootstrap 4? I understand the concept of creating a grid using <div class="row"> <div class="col-md-3" style="width: 100px; height: 100px; color: red"></div> <div class="col-m ...
I'm struggling to figure out how to make the child content fill the height of a column. I've tried using Bootstrap grid system and flex utilities. The only solution that somewhat worked was setting the row height to 50%, but the issue is, I don& ...
As a PHP novice, my goal is to integrate a daily meditation feature that corresponds to the current day. For example, on January 1st, I would like to display content from 1_1.php, and on the following days, it should load 1_2.php, 1_3.php, continuing unti ...
Similar Question: Preventing CSS styles from being applied to specific sections of code When HTML code is inserted into WordPress with multiple plugins, each may have its own style that automatically overrides global styles. To address this issue, one ...
I'm currently trying to make translations dynamic, but I'm facing a challenge when it comes to displaying the corresponding objects from another array. In this scenario, I have two arrays that share the same model. What I aim to achieve is to in ...
Create an Angular 2+ code snippet that will print asterisks (*) in a list on button click. When the button is clicked, it should add one more asterisk to the list each time. For example: Button Click 1 - Output: * Button Click 2 - Output: ** Button Cl ...
Issue: I am currently developing a 3 column layout where certain columns need to remain sticky at the top of the viewport. In one section, I want to use the same video as a background for all 3 columns, with the specific effect of having the middle column ...
https://i.stack.imgur.com/OHL0A.png I attempted to access the following link http://jsfiddle.net/jlspake/v2L1ny8r/7/ but without any success. This is my TypeScript code: var viewModel = function(data){ var self = this; self.orders = ko.observableArr ...
In my index.html file, there is an inline script containing various variables... <body> <div id="load-form-here"></div> <script> let formID="abc123" let myBool = true let myArray = ["foo" ...
In my PHP file, I am querying a database to retrieve a list of items and then generating an HTML table to display those items. Each table cell contains input elements within a form <form> <table> ... <td> & ...
I am facing an issue with a specific piece of code: <script data-main="http://northapp.co/_a/js/main.min.js" src="http://northapp.co/_a/js/require.js"></script> Why am I unable to connect require.js with jquery.min.js? I have tried the follow ...
My background is in PHP, where form data with names ending in square brackets are automatically interpreted as arrays. For example: <input type="text" name="car[0]" /> <input type="text" name="car[1]" /> <input type="text" name="car[3]" /&g ...
Looking for assistance with code to have my site header appear after the page has scrolled past Figure 1 and change on reaching Figure 2. Any suggestions on how I should write this code? Your help is greatly appreciated! ...
My login page confirmation code is giving me an error when trying to log in: Warning: mysql_fetch_row() expects parameter 1 to be resource, boolean given in /home/u133082736/public_html/login.php on line 14 This is the snippet of my code that's ca ...
Is there an alternative to JSFiddle.net that allows users to experiment with Javascript, HTML, and CSS offline in a similar way? ...
<input name="submit" type="submit" value="Search" class="button search"> Is it feasible to incorporate a CSS gradient using background-image: and still display the text within the value attribute? Whenever I introduce a background-image, it conceal ...
Is there a way to eliminate the white spaces in my cuts using clip-path or achieve the same design as shown in the image with images placed next to each other? Can you provide guidance on how to do this? https://i.sstatic.net/Zxs0z.jpg This is my CSS cod ...
Instructions: Utilize javascript and the classList property to change which elements have the .highlight class. Iterate through all the <li> elements and toggle the .highlight class on each one. Do not make any changes to the HTML and CSS. Your end ...
I'm struggling to display data stored in a MySQL database within textareas on an HTML page. I am able to do this successfully with regular text boxes where I can use the "value" attribute, but when attempting to echo the data into textareas, it consis ...