I have a jQuery menu which slides in from the left when clicked. I cannot seem to get a scroll bar to display on the side of the menu, it scrolls using a mouse wheel or trackpad. But it is not apparent to the user that there is content below what they can already see.
http://sohobarmontpellier.com/
Menu is on the left hand side.
I have already tried;
overflow-y: scroll;
+
overflow-y: auto;
height: 500px;
But neither of these display a scroll bar.
Thanks in advance.
Try this:
overflow-y: scroll !important;
Related
I have a div containing a form like this:
The results table below is very wide, so horizontal scroll is needed.
How can I make the form div sticky so that when I horizontally scoll
over the results the form stays on the top?
Only found documentation on vertical scroll with position:sticky, but nothing about horizontal scroll. Any advice will be welcome.
try to wrap the table in the div with class name wrapper or any name you want and add these styles:
.wrapper {
width: 100vw;
overflow-x: scroll;
}
I am using this megamenu code:
https://codepen.io/riogrande/pen/MKXweV
But I have added
.menu-container{
position:fixed;
}
This works for desktop versions, but when you shrink to mobile, it means that you can't see all the menu items. I can add
.menu-container{
overflow-y:scroll;
max-height:100%;
}
to the mobile styles to create a scroll bar, but I would prefer to not have a scrollbar, I just want the user to be able to scroll down to see all menu items the same way it works when the position is set to relative.
How can I achieve this effect without losing the fixed position on mobile?
actually mobile devices don t show scroll bar. Only on dev mode you see scroll bars.
Change overflow-y: scroll to auto;
Or remove the scroll bar
.my-div-class::-webkit-scrollbar
{
width: 0; // Or display: none;
}
Note that this may not work in any browsers.
Target the div that you want no scrollbar
Here is the link to my page: http://smuggler-cow-23486.netlify.com/dashboard
When I click on Toggle menu button at the Top right corner at mobile size window, it shows bottom scroll.
use overflow: hidden; to remove the scroll for horizontal
.dashboard {
overflow-x: hidden;
}
I have created a div and set its initial position
<div class="guide" >
<style>
.guide{
height:150px;
width:200px;
position:absolute;
right:-170px;
top: 10%;
}
</style>
What i want when i click on the div it should comeout from right side.
The problem is window is providing hrizontal scroll, so if a person scrolls to right the div is compltely visible.
I want to stop horizontal scroll so that if the user click on div then only its visible.
Now if any body explain that why its going after -ve pixels, becouse sometime it doesn't go beyond -ve px, sometime it goes, why?
Add overflow-x: hidden; to the Parent element.
Horizontal Scrollbar :
overflow-x: hidden;
Vertical Scrollbar :
overflow-y: hidden;
both: overflow: hidden;
Hide vertical scrollbar of a parent div by using
overflow-x: hidden;
I have a div that animated from height: 0 to height: 80% (80% of the body) and sometimes the content in this appearing div will be bigger than the div, requiring a scroll bar.
Problem is the scroll bar isn't apparant when the animation is running, and it only appears when it needs to after the animation. (kinda a good thing really)
But I'm being picky because I'm adding the final touches to my site and when the scroll bar randomly appears, it shifts the content left and it just looks funny.
So I want the scroll bar to be there all the time regardless. Is this possible?
Your animation library must be setting overflow: hidden on the outer element, which is why the scrollbar disappears.
Try wrapping the content in one more div:
<!-- the outer element; pass this one to the animation lib -->
<div>
<!-- the scroll bar will appear on this element -->
<div style="overflow: scroll; height: 100%">
<!-- content here -->
</div>
</div>
Try it here: http://jsfiddle.net/e3BkK/
To always display a vertical scroll bar, you can use
#yourDivId {
overflow-y: scroll;
}
If your contained content has a smaller height than #yourDivId, then the vertical scroll bar appears disabled.
If it has a bigger height, then the vertical scroll bar becomes enabled.
Add overflow: scroll to the body element through CSS: http://jsfiddle.net/GMcdf/1/.
body {
overflow: scroll;
}