Is there any way to just change the colour of a scrollbar in CSS, but keep the native 'disappear when not scrolling' effect. Basically I just want to turn the native scrollbar blue instead of its default black/dark-grey, but whenever I apply code like this
::-webkit-scrollbar {
width:5px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: blue;
border-radius:5px;
opacity:0.5;
}
The scrollbar looks how I want it too, but its persistent, instead of disappearing when i'm not scrolling. Is there any way I can keep that effect on a custom scrollbar?
EDIT - As requested my current browser is google chrome 73.0.3683.103
The most you can do using only css and webkit is to use the :hover/:active selectors to display or hide the scrollbar. The thing is, this will work on hover/selection and not on a finger swipe or a mouse wheel. Also this webkit property will not work on firefox or edge.
::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 5px;
opacity: 0;
}
::-webkit-scrollbar-thumb:hover {
background: blue;
border-radius: 5px;
opacity: 0.5;
}
Info on webkit scrollbar
This question has a nice example of a smooth transition on hover
A late answer hopefully it still helps.
I don't think you can do this with pure CSS, (but i could be wrong)
You can use some jQuery to help you. I have a working fiddle here: https://jsfiddle.net/kingafrojoe/Le253gdw/29/
In your CSS .has-scroll to the scrollbar selectors as below
/* Add a css class to your scroll selectors */
.has-scroll::-webkit-scrollbar {
width: 15px;
}
.has-scroll::-webkit-scrollbar-track {
background: transparent;
}
.has-scroll::-webkit-scrollbar-thumb {
background: blue;
border-radius: 5px;
opacity: 0.5;
}
#tall {
height: 500px;
width: 100%;
background: #00ffff;
display: block;
}
In your HTML you will need a wrapper div wrapping the whole body of your document.
The body class also gets the class has-scroll jQuery will control this class.
<body class="has-scroll">
<div id="site">
<div id="tall"> I am tall content</div>
<!-- ALL other page HTML -->
</div>
</body>
</html>
Then some jQuery to detect the height of the content and the window.
If the content is taller than the window then there needs to be a scrollbar, else the scrollbar can do default behavior
<script type="text/javascript">
jQuery(window).load(function(){
var _body = $('body');
var _site = $('#site');
$(window).resize(function(){
show_scroll();// call the function on the window resize
});
show_scroll();// call the function
function show_scroll(){
// if the content wrapper is taller than the window add the has-scroll class,
// else remove the has scroll class to return default scroll behavior.
if(_site.outerHeight()>$(window).outerHeight()){
_body.addClass('has-scroll');
}else{
_body.removeClass('has-scroll');
}
}
});
</script>
Related
I want to customize scroll bar for the whole application. Which means I want to change the default browser look on scroll bar. In my styles.scss file I have tried but saw no difference in scroll bar:
::-webkit-scrollbar {
//changes
}
html::-webkit-scrollbar {
//changes
}
body::-webkit-scrollbar {
//changes
}
::ng-deep ::-webkit-scrollbar {
//changes
}
app.component.html:
<app-shell>
<main>
<router-outlet></router-outlet>
</main>
</app-shell>
shell.component.html:
<nav>
<!-- navbar here -->
</nav>
<main>
<ng-content></ng-content>
</main>
Is there something that I misunderstood about scrollbars? How to change the browser default scroll bar around the application?
UPDATE: Even if there is nothing to scroll on the page, there is white scrollbar on the right side.
I have used many times these code lines:
::-webkit-scrollbar {
width: 0; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}
::-webkit-scrollbar-thumb {
background: #FF0000;
}
They worked for me in many situations.
Try using !important or specifying the div in which the scrollbar is rendering (I needed this is some cases)
.your-div-selector::-webkit-scrollbar {
width: 0; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}
.your-div-selector::-webkit-scrollbar-thumb {
background: #FF0000;
}
I'm trying to hide the scroll-bar in ion-content (Ionic 4)
there's no ion-scroll on ionic 4 so I used the ion-content
but I can't find any css attribute to hide it (most of them not work)
I do want to scroll but I don't want to see the scrollbar
::-webkit-scrollbar,
*::-webkit-scrollbar {
display: none;
}
I've tried it but it doesn't work in ion-content.
Because of Ionic use shadow DOM for ion-content, should disable scroll in element on shadow DOM and after that make ion-content his own scroll and then hide scroll bar for ion-content. The result's ion-content with the hidden working scroll bar.
Need to use CSS Custom Properties. Add styles to global scope.
ion-content {
// overwrite inline styles
--offset-bottom: auto!important;
--overflow: hidden;
overflow: auto;
&::-webkit-scrollbar {
display: none;
}
}
In Ionic 4 you must use following, because Ionic use shadow DOM:
global.scss
.no-scroll {
--overflow: hidden;
}
and in page
<ion-content class="no-scroll">
::-webkit-scrollbar,
*::-webkit-scrollbar {
display: none;
}
ion-content {
--offset-bottom: auto!important;
--overflow: hidden;
overflow: auto;
&::-webkit-scrollbar {
display: none;
}
}
::-webkit-scrollbar, *::-webkit-scrollbar {
display: none;
overflow: hidden;
}
ion-content {
overflow: hidden;
--overflow: hidden;
}
.scroll-content {
overflow: hidden;
}
ion-infinite-scroll.md.infinite-scroll-enabled.hydrated {
overflow: scroll!important;
height: 100%!important;
}
The <ion-content> is a custom element with shadom DOM. There's something called the ::part pseudo element to target an element in a shadom DOM element.
If you look at the shadow dom, you will see this:
Take notice of the part="scroll". Ionic did add parts to their elements that we can use via the ::part pseudo element to target this and apply our custom css to hide the scrollbar:
ion-content::part(scroll)::-webkit-scrollbar {
display: none;
}
Tested this on iOS and Android successfully. I'm not getting it to work on Chrome though.
Try this, seems to work fine so far while preserving all functionality in Ionic 5.
// variables.scss
ion-content {
width: calc(100% + 15px);
}
ion-content::part(scroll) {
padding-right: 15px;
}
I have confirmed the following solution works in Ionic 5 although i do believe this should work in Ionic 4 as well.
As others here have noted, the scrollbar which controls the scrolling of content inside of an ion-content component exists in the shadow DOM within it and thus you need to target the scrollbar using ::part() CSS pseudo-element.
In your global style sheet add the following css declarations which will hide the scrollbar while retaining the ability to scroll:
/* chrome, safari */
ion-content::part(scroll)::-webkit-scrollbar {
display: none;
}
/* firefox */
ion-content::part(scroll) {
scrollbar-width: none;
}
Thank you #rostislav
Your solution even don't suggested by WebStorm and draw yellow underline in the meaning of warning, but work for me and work, it's awesome :)
solution: add these lines to both global.scss and variables.scss:
::-webkit-scrollbar, *::-webkit-scrollbar {
display: none;
overflow: hidden;
}
ion-content {
overflow: hidden;
--overflow: hidden;
}
.scroll-content {
overflow: hidden;
}
NOTIC: then clear browser cache and refresh page, it's great!
but don't forget that scroll disabled in all pages, add this code to only .sccs file of pages that don't need to be scrolled!
Refactored #Sergey Oleynikov solution and it worked perfectly for me
ion-content {
// overwrite inline styles
// --offset-bottom: auto !important;
--overflow: hidden;
overflow: auto;
&::-webkit-scrollbar {
display: none;
}
}
Here is a hack? https://github.com/ionic-team/ionic/issues/17685
<ion-content>
<div style="background-color: #f2f2f2 !important; height: 100vh; overflow: auto;">
# content here
</div>
</ion-content>
I couldn't find a reliable way to do this using the previously mentioned methods, they either didn't work or stopped the scrolling all together. My approach was to make the ion-content window wider than the screen.
.noscroller {
left: -10px;
width: calc(100% + 20px);
}
if you want to remove the scroll dynamically. You can use the approach of removing the scroll-y class from shadowDOM at <main class="inner-scroll scroll-y"></main> within <ion-content></ion-content>.
Firstly, import { Renderer2 } from '#angular/core' in your constructor(renderer: Renderer2)
To reach this, in your your-component.component.ts at event cycle ngAfterViewInit or onward.
This will remove the scroll from the page activated in your app.
for(let el of Array.from(document.querySelectorAll(".ion-page:not(.ion-page-hidden) ion-content")))
{
this.renderer.removeClass(el.shadowRoot.querySelector("main[part=scroll]"), "scroll-y");
}
This will add the scroll from the page activated in your app.
for(let el of Array.from(document.querySelectorAll(".ion-page:not(.ion-page-hidden) ion-content")))
{
this.renderer.addClass(el.shadowRoot.querySelector("main[part=scroll]"), "scroll-y");
}
The Code from spicemix worked! I pasted the code in global.scss and not in variables.scss
/* global.scss */
ion-content {
width: calc(100% + 15px);
}
ion-content::part(scroll) {
padding-right: 15px;
}
For me it works after adding the no-scroll class in the <IonContent> element, as mentioned above, and after adding the following lines
useEffect(() => {
const style = document.createElement("style");
style.innerHTML = ".inner-scroll.scroll-y.overscroll { overflow: initial; }";
ionContent.current.shadowRoot.appendChild(style);
}, []);
Then in the render <IonContent ref={ionContent} className="no-scroll">...</IonContent>
The thing is that in these classes inner-scroll and scroll-y there is a overflow: hidden; style so we just have to override it.
I believe you can use
slot="fixed"
to make the element fixed thus removing the scroll bar by default for you.
Refer ionic documentation
i have problem with this code and the problem is that before 1200px everything is OK but after re-sizing to 1200px and more ( before width of scroll bar, for example chrome scroll-bar width is 17px ) before 1218px, we will see unwanted horizontal scroll-bar annoying us.
i want to solve this problem but i don't know how.
anybody knows how? so please guide me.
link of my codes and online test:
https://codepen.io/mostafaeslami7/pen/xZePXq?editors=1100
my html:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="header">
<div class="inner-header">header</div>
</div>
<div class="body">body</div>
<div class="footer">
<div class="inner-footer">footer</div>
</div>
</body>
</html>
my css:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
color: white;
font-size: 30px;
text-align: center;
}
body{
background-color: orange;
}
.header{
border-bottom: 1px solid black;
}
.inner-header{
background-color: black;
}
.body{
height: 3000px;
background-color: blue;
}
.footer{
border-top: 1px solid black;
}
.inner-footer{
background-color: green;
}
.header,
.footer{
width: 100%;
height: 100px;
}
.inner-header,
.inner-footer{
height: 100%;
}
.inner-header,
.body,
.inner-footer{
width: 1000px;
margin: 0 auto;
}
#media screen and (min-width: 1200px){
.inner-header,
.body,
.inner-footer{
width: 1200px;
}
}
I know it a old question. but i had like to share this, Hopping someone will find it useful and will save someone's day.
So, There is no quick way, You will have to do some digging and find yourself the element which is causing overflow. Thus, creating unwanted horizontal scroll and pain in your ass. Normally one way would be to just write
body {
overflow-x: hidden;
}
and hope that overflow-x on body will remove that horizontal scroll bar but some times you have to apply overflow:hidden to you main container of the site. Which likely works all the time or most of the times. like,
.main_container {
overflow: hidden;
}
There are some tricks that can help you find those overflow elements such as using below JavaScript script, just open console and execute it there
var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
document.querySelectorAll('*'),
function(el) {
if (el.offsetWidth > docWidth) {
console.log(el);
}
}
);
OR you could execute jQuery one,
$.each( $('*'), function() {
if( $(this).width() > $('body').width()) {
console.log("Wide Element: ", $(this), "Width: ", $(this).width());
}
});
or you can use this little jquery snippet. It will logging out the elements directly in console along the elements width, which can help you to easily highlight them on hover in your console (at least in Chrome).
$.each($('*'), function() { if ($(this).width() > $('body').width()) { console.log($(this).get(0)); } }).length;
or if you still can't find that particular element use this below trick,
//Open inspector -> “New Style Rule”:
* {
outline: 1px solid red;
}
You can always add: opacity: 1 !important; visibility: visible !important; if you think you might have a hidden element but usually the above works without extra effort.
Hope it helps someone. Happy digging.
I can't really recommend it but you can use overflow-X:hidden on the body element (not the element with a class of .body*). It's not as though you need to see anything outside of the sides of your container anyway...right?
* you should really not use that name for a class, it's unnecessarily confusing.
#media screen and (min-width: 1200px) {
body {
overflow-X: hidden;
}
.inner-header,
.body,
.inner-footer {
width: 1200px;
}
}
Ideally, you should adjust the design to allow for this though. Different browsers treat the scrollbars differently when it comes to calculating the viewport width.
Codepen Demo
You can change your .inner-footer from width: 1000px to max-width: 1000px; and that will fix the issue.
Here you change code like that. overflow-x: hidden; is hidden the horizontal scroll bar.
body{
background-color: orange;
overflow-x: hidden;
overflow-y: scroll;
}
You could solve this in quite a few ways - one of which is changing your width: 1000px to max-width: 1000px
Another might be simply styling / hiding the scroll bar with some -webkit prefixes. Wouldn't recommend this route for multiple UX reasons but if you want to read up on styling scrollbars - check out this resource.
Lastly you could specifically target the x-axis scroll bar with overflow-x and remove / hide it by setting this to hidden. Again - this method is not the best. How would a user know content is off the page without the scroll bar?
i solve it very easy. if you define min-width media queries = width + scroll-bar width ( for example in chrome is 17px or in opera is 15px but for sure we say 20px ) the problem will be solve.
new link of code:
codepen.io/mostafaeslami7/pen/JGVLdK?editors=1100
JSFiddle
When you click the button, you see that :active pseudoclass is triggered for the parent div. Is there a pure CSS (or some JS library) way of :active pseudoclass not toggling on button click?
I tried z-index, position: absolute & fixed and no success.
From the spec:
Selectors doesn't define if the parent of an element that is ‘:active’ or ‘:hover’ is also in that state.
That means it's implementation dependent. If an implementation chose to act this way (as current browsers obviously do), there's nothing in the standard that can change that.
With CSS4, you might be able to do:
.parent:active:not(:has(:active)) {
color: red;
}
but that is neither available nor finalized yet.
If you really want to solve this with CSS only:
If your button is active, add a :before-pseudo-element and with position: absolute; give the :before the same background as the parents.
button:active::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #eee;
z-index: -1;
}
Now all that is needed is that the parent is :
position: relative;
z-index: 0;
Have a look: http://jsfiddle.net/s0at4w4b/4/
This does not solve the underlying issue, but is a solution for your current problem.
I don't think :has pseudo-class will ever be available in stylesheets. If browsers finally decide to implement it, it will probably be only for JS APIs like querySelector.
However, I have much more hopes for :focus-within, which seems much simpler to implement.
#parent:active:not(:focus-within) {
background-color: red;
}
Of course, it will only prevent :active from being applied to #parent when clicking a focusable element like a button. You can make other elements focusable by adding tabindex = "-1"
Sadly, :focus-within is not widely supported, but you can use a JS polyfill.
#parent {
border: 1px solid black;
width: 300px;
height: 300px;
}
#parent:active:not(.focus-within) {
background-color: red;
}
<script src="https://gist.githubusercontent.com/aFarkas/a7e0d85450f323d5e164/raw/"></script>
<div id="parent">
<button>Click me</button>
<p tabindex="-1">Or me</p>
</div>
Github does not allow hotlinking, so the snippet above might not work unless you copy the polyfill to your server and use it.
Perhaps the simplest way of achieving what you probably really want to do is to put not put the button inside the div you don't want activated.
Here, you have a container div, which contains a background div (the equivalent of the parent div in your original example). The background div has an active state separate from the button's.
.container {
position: relative;
width: 200px;
height: 200px;
}
.background {
position: absolute;
width: 100%;
height: 100%;
border: 1px solid black;
background-color: #eee;
}
.background:active {
background-color: red;
}
button {
position: relative;
}
<div class="container">
<div class="background"></div>
<button>Click me!</button>
</div>
This may or may not work for you, but this is how I achieve it with pure CSS. The only caveat is the dependence of focus-within which isn't supported by IE or Edge.
.parent {
transition: background-color;
}
.parent:active:not(:focus-within) {
background-color: red;
transition-delay: 1ms; // Delay one cycle to allow child to focus
}
What's going on here is, the parent element will get the active state, as will the child that gets clicked. The only difference is that the focus will apply to the child element, but only on the next cycle. To circumvent any animations from while in this 2 step process, apply a 1ms delay. The next cycle, the element will be active, but the focus will be applied to the child. Thus, the parent will not apply the transition. I would imagine animation delay: 1ms would work the same way.
Another alternative is to give the item a tabindex=-1 attribute and use
.parent {
transition: background-color;
}
.parent:active:focus {
background-color: red;
}
The only issue with this is the fact it may change keyboard navigation behavior and relies on some HTML as well. If you do want keyboard navigation use tabindex=0 or any value besides -1. But there's no JS used.
There are some nice polyfills for focus-within that you can use for IE/Edge but that would go outside "CSS Only".
But, we can put both of them together to create this:
.parent {
transition: background-color;
}
.parent[tabindex]:active:focus {
background-color: red;
}
.parent:active:not(:focus):not(:focus-within) {
background-color: red;
transition-delay: 1ms;
}
This works on IE11, Edge, and Chrome.
http://jsfiddle.net/s0at4w4b/42/
here's a jquery solution instead of using the css pseudo class :active
$(document).ready(function() {
$('button').mousedown(function(e){
e.stopPropagation();
console.log('i got clicked');
});
$('div').mousedown(function(e){
$('div').css('background', 'red')
}).mouseup(function(e){
$('div').css('background', '#eee')
});
$(document).mouseup(function(e){
$('div').css('background', '#eee')
});
});
div {
width: 200px;
height: 200px;
background-color: #eee;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button>Qlick me</button>
</div>
As far as I know, the the active state will bubble up. So all parent nodes will have an active state.
Therefore, I don't now of a pure CSS solution. You can avoid a javascript solution (which I assume is what you're really after), by altering the markup so that the div that has an active state is no longer a parent of the button. You can make them siblings, for example.
The CSS part of that solution is then fixing the layout so it appears the same now that they are sibilings as what it did when they were parent>child.
Without seeing a fiddle of what you're working with, I can't offer you a more specific solution I'm afraid.
try this
html:
<div class="current" id="current">
<button id="btnclick" >Qlick me</button>
</div>
css script:
div {
width: 200px;
height: 200px;
background-color: #eee;
border: 1px solid black;
}
.current_active{
background-color: red;
}
jquery:
$("#btnclick").click(function(){
$("#current").toggleClass("current_active");
});
JSFiddle
ps: include the jquery library file
The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it. On systems with more than one mouse button, :active applies only to the primary or primary activation button (typically the "left" mouse button), and any aliases thereof.
There may be document language or implementation specific limits on which elements can become :active. For example, [HTML5] defines a list of activatable elements.
The parent of an element that matches :active also matches :active.
So there,s no way
Instead of div:active {...} you should code div:active:not(:hover) {...} and the background-color stays untouched.
(old snippet removed)
UPDATE
To keep the main div behaviour intact and a more generic approach I usually create several layers.
Check the snippet below, toggling to green is just to prove that it works while position and abolute are just quick and dirty for now:
#layer-data {
width: 200px;
height: 200px;
background-color: #eee;
border: 1px solid black;
}
#layer-data:active {
background-color: red
}
#layer-btns:active {
background-color: green
}
#layer-btns {
z-index: 1;
position: absolute;
top: 1px;
left: 1px;
background: transparent;
padding: 5px;
width: auto;
height: auto
}
#layer-data {
z-index: 0;
position: absolute;
top: 0;
left: 0;
text-align: center;
line-height: 200px
}
<div id="layer-btns">
<button>Qlick me</button>
<br/>
<button>Qlick me too</button>
<br/>
<button>Qlick me three</button>
</div>
<div id="layer-data">
some data-layer
</div>
There doesn't seem to any CSS way to handle this case. (not sure about CSS4, the way Amit has suggested.) So here is JQuery way.
The idea is you handle mousedown and mouseup events at 3 levels:
the parent div
the button where you don't want the active state propagated to parent div (".btn1" in the example below)
any other children except the button in second condition. (".btn2" in the example below)
JS Fiddle
HTML:
<div>
<button class="btn1">Qlick me1</button>
<button class="btn2">Qlick me2</button>
</div>
JQuery:
$(function(){
$('div').each(function(e){
$(this).mousedown(function(e){
$(this).addClass("activeClass");
}).mouseup(function(e){
$(this).removeClass("activeClass");
});
});
$('div .btn1').each(function(e){
$(this).mousedown(function(e){
e.stopPropagation();
}).mouseup(function(e){
e.stopPropagation();
});
});
$('div :not(.btn1)').each(function(e){
$(this).mousedown(function(e){
$(this).parent().addClass("activeClass");
}).mouseup(function(e){
$(this).parent().removeClass("activeClass");
});
});
});
CSS:
div {
width: 200px;
height: 200px;
background-color: #eee;
border: 1px solid black;
}
.activeClass {
background-color: red;
}
CSS pseudo-elements are incredibly useful -- they allow us to create CSS triangles for tooltips and perform a number of other simple tasks while preventing the need for additional HTML elements. To this point, these pseudo-element CSS properties have been unreachable by JavaScript but now there's a method for getting them!
Check this:
http://davidwalsh.name/pseudo-element
http://davidwalsh.name/ways-css-javascript-interact
NOTE : The name of the post is what I suppose is happening... It can be edited later if someone find a better short description
> What am I trying to do ?
I'm trying to hide a scroll bar by adding padding on the right side of the scrollable element.
This element contains child elements (list or table)
> What problems are you facing ?
The width of the child element should be 100% of the containing element, but obviously it's less.
The empty space on the right looks like it's the scrollbar place.
So my questions are :
Why is that happening ?
How can I get the childElement (.inner*) to fit in the ContentBox of its parent ?
> Can you reproduce the bug ?
Here is a Fiddle with nothing else but what I'm talking about : JsFiddle
> Show me that code !
SIR YES SIR :o)
#mainWin {
overflow: hidden;
}
.container {
width: 100%;
padding-right: 40px;
box-sizing: content-box;
overflow: auto;
}
.innerContent, .innerTable {
width: 100%;
}
/* ################################################################ */
/* DO NOT REMOVE */
/* FIXED PROPERTIES */
#mainWin {
/* Simulate a calculated width (in %) */
width: 400px;
}
.container {
/* Arbitrary height of the scroll zone */
height: 200px;
}
/* DEBUG ¨PROPERTIES */
#mainWin {border: 1px solid #000;}
.container {background: #A55;border: 1px solid #5A5;}
.innerContent, .innerTable {background: #55A;border: 1px solid #D4E200;}
/* END DO NOT REMOVE */
/* ################################################################ */
<div id="mainWin">
<div class="container">
<table class="innerTable">
<tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr><tr><td>test</td></tr>
</table>
</div>
<hr>
<div class="container">
<div class="innerContent">
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test
</div>
</div>
</div>
PS: I put some CSS properties apart (end of CSS section) because I don't think they have anything to do with this problem and seems mandatory for me to get the expected result
♥
I found a way to solve my problem by adding some Javascript. If someone has a pure CSS solution, I would like to see it.
Here is the Javascript added :
function removeScrollBar() {
$(".container").each(function() {
var iWidth = $(this).width();
var child = $(this).find(".innerTable, .innerContent");
child.css('width',iWidth);
});
}
$(function() {
removeScrollBar();
});
Working JsFiddle