Hiding horizontal scrolling bar doesn´t work using simplebar library - html

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;
}

Related

Div Card Elements Won't Scroll

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.

hide scrollbar if not scrolling

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

putting a scroll bar on a web page

I have a web page that is longer than the standard screen. When I open it in the browser there is no vertical side scroll bar that allows the user to move down the page. I tried using the line overflow:scroll; but it seems it is ignored. I have a header and a line of buttons, then the content is in three sections. I have the overflow:scroll within the first BODY line like this: body overflow:scroll class="plugin webkit chrome win Locale_en_US"
How do I force the scroll bar to appear and where should it be properly placed?
Sorry, it's been years since I've done html or any kind of coding so bear with me.
The overflow is a css attribute, meaning that it should be in a style tag, or even better, in an external css file ( http://www.w3.org/TR/html401/present/styles.html )
In your case it would be:
<body style="overflow: scroll" class="plugin webkit chrome win Locale_en_US">
Use css style='overflow: auto;'. If not works, find any element, that is overflow: hidden; and apply overflow: auto to it. Or add JSFiddle
i'm using this in my project, i created a css like this
div.scrolled {
width: 1150px;
height: 620px;
overflow: scroll;
}
and in my html file i only identify what area i want to introduce into my div and i do this
<body>
<div class="scrolled">
here goes wath you want
</div>
</body>
and you will have your scroll in 'y' align, hope i helped you

Is there a way to never ever have a scroll bar on a div?

I have a div that, depending on circumstances, can overflow. Is there a way so that, no matter how much data is in the div, it will not have a scroll bar? I was hoping that there would be a style I could just add like:
<div style="width:100; height:100; noscroll:true" >
Is there such a thing?
Yes, you can use overflow: hidden; and it will never show a scroll bar. Note that this might also disable scrolling (even with mouse wheel) in some browsers.
You can specify overflow-x: hidden; for horizontal or overflow-y: hidden; for vertical scrollbars.

Remove horizontal scroll bar Godaddy html

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.