I would like to hide the scrollbar if the the user is not scrolling, meaning if the user scrolls, the scrollbar should appear (only the scrollbar not the scroll track), while if the user does not scroll it should disappear. I sort of had that setup for a long time, but than I made some changes to my page and now the page always shows the scrollbar (if there is more content than one page can cover). Unfortunately I don't know what I did to make this feature go away? I played around with overflow in the css, but overflow: hidden just removes all scrolling possibilities. Here is a fiddle which shows my current setup
https://jsfiddle.net/jsmnsLm7/ (please make the window big, so that you can see all of the features of my navbar setup)
as you can see I use
overflow: hidden
in the body and
overflow: scroll
in the main.
thanks for your help
carl
try following css:
overflow:auto;
It worked for me :)
This will do what you're looking for
http://rocha.la/jQuery-slimScroll
Or you could just show the scrollbar when you hover over the area using CSS only;
This worked for me;
<style>
#ID {
overflow-y: hidden;
}
</style>
#ID:hover, #ID:active, #ID:focus {
overflow-y: auto;
}
</style>
<div class="ID"></div>
There isn't a way to do this outside of a scripting languege as far as I know, but the JavaScript you use for this is super simple.
Start off with a CSS style of:
#ID {
overflow: hidden
}
Then in your div in the HTML use this command
<div id="ID" onmouseover="this.style.overflow='scroll'"
onmouseout="this.style.overflow='hidden'"
this will cause your scroll button to appear when the user hovers over the div, but then disappear again when the user hovers away from the div.
If you are using bootstrap, it is pretty simple - There is a default Scroll class to which you can apply the style overflow: auto.
<div class="Scroll" style="overflow: auto" >
.......
</div>
Based on this https://stackoverflow.com/a/40857678/15992537 answer I made this:
.categorias::-webkit-scrollbar-thumb {
height: 6px;
background: #ff3d1d;
border-radius: 10px;
visibility: hidden;
}
.categorias:active::-webkit-scrollbar-thumb {
visibility: visible;
}
this worked in my case because my div is draggable, so the thumb shows when i drag and move it, but with JS you probably can make it apear based on events like page scroll for example.
use overflow: auto
The overflow property has the following values:
visible - Default. The overflow is not clipped. The content renders outside the element's box
hidden - The overflow is clipped, and the rest of the content will be invisible
scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
auto - Similar to scroll, but it adds scrollbars only when necessary
Related
I am new to HTML and CSS and am creating a website for a basic university course. For a project, I have created 8 div cards highlighting the planets of the Solar System but cannot get the cards out of this fixed/unscrollable position.
This is the link to the current page state:
https://hollandtheperson.com/dight/250/website/planets.html
Any tips on how to fix this?
You have added overflow: hidden; for the CSS in the body tag, which hides the scrollbar essentially making the scroll feature unusable, if you remove it then it should work.
You can set the overflow-x instead of overflow to hidden, like so:
...
overflow-x: hidden;
...
This disables horizontal scroll but allows vertical scroll
The problem isn't really with it being fixed in place, but i can see why you got that impression.
You're using overflow: hidden; which means "if something doesn't fit, snip it off".
So, because the overflow has cut away everything wasn't already within the viewport - there is now nothing outside the viewport, and hence, no reason to allow scrolling.
Fixed the .card height and add overflow-x: hidden which give you scrolling card. Sample code given below:
.card{
// add additional code
height: 350px;
overflow-x: hidden;
}
Hi can see that you have added items in css of body tags which i guess you should remove in order make it scrollable feature those are
height: 100vh;
overflow: hidden;
Please check if that works hopefully it should be.
I'm using simplebar library (https://github.com/Grsmto/simplebar) inside of an angular 6 project, when I added the simple bar in my html tag, it showed up an horizontal and a vertical scroll bar, so I want to show the vertical scroll bar only.
I've tried to hide the horizontal scroll bar with this CSS property:
overflow-x: hidden
and with this properties too:
width:100%" and "position:abolute" or "position:relative"
<div data-simplebar style="overflow-x: hidden">
<div *ngFor="let example of examples;">
<div>{{example.title}}</div>
<p>{{example.text}}</p>
</div>
</div>
I expect only to show the horizontal scroll bar, but it doesn't seem to work, I don't know if I'm missing something or some CSS property, or if Angular is causing this problem.
The SimpleBar library creates wrapper around your contents, hence the CSS overflow applied on your div will not hide the scrollbars.
Hide the horizontal scroll bar created by the plugin
.simplebar-track.simplebar-horizontal {
display: none;
}
and disable the scroll on scrollable div created by the library.
.simplebar-content {
overflow-x: hidden;
}
If you are using SimpleBar from simplebar-react, you can set the overflow in the style, as in the example below.
<SimpleBar style={{overflowX: 'hidden' }} autoHide={true}>
...
</SimpleBar>
try using both of these commands at once.
overflow-y: scroll;
overflow-x: hidden;
Old question, but I think there are still no good answer to it.
When I am in need of hiding the horizontal scrollbar that's what I do:
.simplebar-scrollbar::before {
background-color: transparent;
}
I'm having a responsive website which has the menubar as a sidebar (like FB app) which is fixed via position: fixed; to the right corner. This works fine so far except for iOS7 in combination with -webkit-overflow-scrolling: touch;. The fixed element does not stay at its position, moreover it jumps to the fixed position after the scroll is finished.
Does anyone of you have an advice?
Thanks
I've been struggling with exactly same issue for the whole day, the conclusion is, yes, there is a bug when you position an element as 'fixed' within a container with '-webkit-overflow-scrolling: touch' in Apple screen devices. And I couldn't find any work around. '-webkit-transform: translate3d(0,0,0)' nor '-webkit-backface-visibility: hidden' make any difference.
So finally i got it working by reassembling my html structure, so the fixed element is not within the scrollable container, is in an upper layer. Maybe not ideal if the 'body' is your scrollable container, but hoping it shed some light for a possible solution.
Extending it with a simplified example:
<body>
<sidebar></sidebar>
<div id="content-wrap">
<article></article>
<footer></footer>
</div>
</body>
And CSS would look like:
sidebar{
position: fixed;
}
#content-wrap{
-webkit-overflow-scrolling: touch;
}
Basically the bottom line is, don't position as fixed an element which exist within a scrolling touch container. You have to take it out if you don't want to deal with that iOS weird problem.
I was able to solve this problem by dynamically changing the -webkit-overflow-scrolling style to auto whenever a button was triggered to show the position: fixed div (which is inside the scrolling container).
I simply add the dont-scroll class.
.container{
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.container.dont-scroll{
-webkit-overflow-scrolling: auto; /* The fix */
}
Once the position: fixed div is hidden (in my case, when a user clicks the 'cancel' button on the popup modal), I dynamically remove the dont-scroll class to enable the smooth scrolling once again.
I am currently building a website for Bearskin Group ....
The site is pretty much done, I am creating it with the GoDaddy online builder....
BUT - I have this stupid horizontal bar scroll coming up that id like to diasble...
I have tried using:
style="overflow-x: hidden"
&
div {
overflow-x:hidden;
overflow-y:hidden;
}
Can anyone help me remove this?
Thanks
Dan
This is because you are using huge width.
#wsb-element-233156931 .wsb-image-inner div {
height: 60px;
overflow: hidden;
position: relative;
width: 2904px; /*remove it*/
}
or
change overflow:auto to overflow:hidden in class wsb-canvas-page-container
Also I noticed you are using image (check below), can't you remove the image or use a background-color to fill the color.
<div class="customStyle"><img style="width:2904px;height:60px;" alt="" src="//nebula.wsimg.com/b7fd20f21ba2c36e5ef9f39ea2613e8e?AccessKeyId=D238BA178C5B0342ADD7&disposition=0&alloworigin=1"></div>
I ran into the same problem. It turned out to be an element that was sticking out with an invisible box. You can define page restrictions but if a shape, text box or element is protruding into the edges it automatically overrides your restrictions and creates more room. Eliminating these should shrink your page back down to normal and eliminate the horizontal scroll.
I was reading source code of an template and i got code
<html class="js" style="overflow: hidden">
My question is why would someone will apply overflow:hidden on html tag. what benefit it will give.`
You would use overflow:hidden when you have dynamic, responsive content, for the most part, or at least, that is what I use it for. For example, if you have a page with content that grows in height as you shrink the page, you may want to just hide whatever is not visible in the regular height of the div
It's most likely to remove all scroll bars.
When you set overflow: hidden, anything that is outside of the element is hidden, obviously. What this does when you attach it to the html element is hides everything that is not on the screen. The browser then sees that because everything that is not on the screen is hidden, there is nowhere to scroll to, so it hides the scroll bars.
Templates that want a clean, full browser look will remove scroll bars if they feel that there is nothing that the user should need to scroll to.
Overflow hidden can be used to clear floats http://jsfiddle.net/PRwVT/1/ add
.wrapper {
border: 1px solid;
padding: 3px;
background: red;
overflow: hidden;
}
to overwrite the .wrapper class in that fiddle and you will see what I mean. That being said the only element that could have floats and be a direct child of the html element is the body tag.
This disables the page from scrolling. So for example when you might open an overlay on a page and you would like to be able to scroll the overlay content but not scroll the page behind it at the same time.
In this case you might add a class onto the html element that sets 'overflow:hidden' when you click a button to open the modal, then remove that class when you click the close button on the modal.
The modal would have to have a fixed position for this to work.