We Keep Coding

Hide scrollbars in Quasar/Vue - overflow hidden not working

I am using Quasar/VueJS for development. How can I remove the outermost scrollbar (this is for the actual body of the page).
So annoyed that I have already tried putting overflow:hidden everywhere but it is still there.
Since I have a scrollbar for my sidebar, I just dont want another scrollbar to be beside it, as it can be confusing for the user. As you can see, I am working on adding another scrollbar just beside the actual body of the page.
How can I get rid of the outermost scrollbar?
Codepen:
https://codepen.io/kzaiwo/pen/bGVrweM?editable=true&editors=101%3Dhttps%3A%2F%2Fquasar.dev%2Flayout%2Fdrawer

Working with Quasar, checkout the docs, more specific this class: no-scrollbar. apply this on the element of concern.
Adding the following to your main styling will make the scroll bar go away without losing the scroll functionality:
::-webkit-scrollbar {
display: none;
}
Be aware that this will not work for firefox and IE. More info:
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

.scroll {
overflow: hidden;}
Add this class to your css

<q-layout container>
Remove container from q-layout.
<q-layout>
https://quasar.dev/layout/layout#qlayout-api

You can hide the scrollbar without loosing the scroll behavior with css...
/* Hide scrollbar */
::-webkit-scrollbar {
display: none;
}
This works on chrome for sure, probably on Safari aswell, not sure (probably not) if IE and Firefox.

css issue maybe js issue on magento site

Issue: https://www.mirabella.com/find-your-style/mirabellaclothing/mirabellagear/mirabella-white-sweatshirt.html
this is what happens when we upload a product with with attributes. It seems to be a position issue. But i have tried everything I can think of to correct the issue. If I remove the position attribute it looks fine except some of the text is incorrectly positioned. Actually everything i have tried has not corrected the text position. thanks

Remove the "float:left;" attribute from the style:
.product-view .product-img-box {
/* float: left; */
width: 400px;
}
I would also force the "a.selectBox" (which represents the select control) to be of 100% width to make it fully responsive.

jQuery scrollTop() does not work in scrolling DIV on mobile browsers, alternatives?

I am trying to scroll to a specific location in a scrolling DIV. Right now I am using a pixel offset with the jQuery scrollTop() function which works great on desktop browsers but it does not work on android mobiles browsers with the exception of Google's Chrome Android browser (do not have an iOS device to test if that works). All the solutions I have found are for page (window) scrolling and not for scrolling in a DIV, anyone have any suggestions on what else I can use to accomplish the same task?
Here is a example:
http://jsfiddle.net/aQpPc/
http://jsfiddle.net/aQpPc/embedded/result/
Other things I have tried that work in desktop browsers:
document.getElementById('ID_of_element_in_a_DIV').scrollIntoView();
document.getElementById('ID_of_DIV').scrollTop = 200;
EDIT 3/11/13:
This is a know android browser issue: https://code.google.com/p/android/issues/detail?id=19625
One user in the bug report suggested a workaround:
because the issue only seems to appear when the overflow property is
set to scroll, you can first set it to 'hidden', set the scrollTop
property, then reset it back to 'scroll' (or auto). The scrollTop
property seems to be honored when the element is re-rendered with
scrollbars. It's not clear if this has any unexpected side-effects,
but "it works on my machine!"

This worked for me:
setTimeout( function() {
$(div).scrollTop(0)
}, 500 );

A workaound that worked for me: first, temporarily set the overflow property to 'hidden', then set the scrollTop property, then set the overflow property back to 'scroll' (or auto). The scrollTop value seems to be kept intact and honored when the overflow property is set back to 'scroll'. This was a pretty trivial workaround that worked on all browsers I tested on (desktop and mobile). I didn't test it exhaustively, and I didn't test with transitions in place, so there may be side-effects that I haven't encountered... Your mileage may vary - but it's an easy thing to try.

I found the answer here http://blog.jonathanargentiero.com/jquery-scrolltop-not-working-on-mobile-devices-iphone-ipad-android-phones/
Mobile phones doesn't understand $('html,body') so u can do the following for mobile
if(navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {
window.scrollTo(0)
} else {
// default `$('html,body')` code for scrolling
}
OR
simply use $('body') instead of $('html, body').

rather than using the scroll, scrollTo, or scrollTop methods (which give me problems in mobile), I recommend setting an ID on your top DOM element (like #top), and just using:
document.getElementById("top").scrollIntoView();
that works the best for me so far across all devices and browsers.

I have a couple solutions for you to try. You will have to test them yourself, as I have not tried them in a mobile browser before, but here they are:
Use jQuery's .css() method (or .animate() depending on what your eventual goal us) to adjust the top margin (note: you would have to change the overflow to hidden and wrap the text in an inner div, which would be the element whose to margin you are adjusting)
Do the same thing as in the first solution, except set the embedded div's position to relative and adjust it's top attribute.
Let me know if you need help with any if this or have any more questions about this. Good luck! :)
Note that although I have not tested these in mobile before they are based on CSS standards, not jQuery functions, so they should work.

Temporarily setting the overflow property to 'hidden', as recommended in #Allan Nienhuis' answer, does not work on Android 4.0.3, for instance (which is, e.g., what the Kindle Fire 2s are running) - when you set overflow back to scroll, the element scrolls back to the top.
Alternatives:
Roll your own scrolling via a helper function, as demonstrated here - while this is simple to implement, it is bare-bones in that it doesn't give you inertial scrolling or overscrolling.
Use a library such as iScroll, which implements its own, sophisticated scrolling (inertial, overscrolling) based on CSS transformations.
Using iScroll requires a bit of setup, though: you need a wrapper div with fixed height and style overflow: hidden and the element to scroll should have no overflow style. This jsFiddle demo shows how it's done.

The only way i could achieve scrolling to the top of the page on a Galaxy Tab was hiding the page body for 100ms while scrolling. Using jQuery:
$("body").hide();
window.scrollTo(0, 0);
setTimeout(function(){ $("body").show() }, 100);

Try using jQuery's .animate method:
$('.div').animate({ scrollTo: x; });
Where x is equal to the position of the div you want to scroll to the top of.

Did you try this ?
$("html").scrollTop(0);

jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 1500);
});
});

Use the following code:
$("body").animate( { scrollTop: 50, }, 800, function(){
$("body").clearQueue();
} );

These solutions did not work for me. I know someone mentioned mobile detection but their approach did not work for me. It finally dawned on me to use mobile detection to deliver two different CSS styles for each case. Maybe not ideal but it for sure works. Temporarily changing the styles with js also suggested above did not work for me.
I had a two column layout with independently scrolling divs, each set to overflow:scroll and the body had to be set to overflow:hidden. I need to use scrollTop on one of the columns and no solutions worked.
I used wp_is_mobile() (Wordpress function) and if mobile true, overflow: hidden is removed from body and the divs with overflow:scroll have that css removed. Finally, scrollTop worked on mobile.

$(document).ready(function (){
$(window).scroll(function(){
if($(this).scrollTop() > 100){
$('.scrollup').fadeIn();
}
else{
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function(){
if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {
window.scrollTo(0,0);
}
else{
$('html,body').animate({
scrollTop: 0
}, 500, function(){
$('html,body').clearQueue();
});
}
});
});
body{
height: 1500px;
}
.scrollup {
bottom: 135px;
height: 40px;
width: 40px;
display: none;
background: #000;
border: 2px solid #fff;
border-radius: 100%;
box-shadow: 1px 3px 5px #000;
text-align: center;
font-size: 25px;
color: #fff;
cursor: pointer;
position: fixed;
right: 12px;
line-height: 36px;
z-index: 25;
}
svg{
fill: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scrollup">
<svg height="35" viewBox="0 0 512 512" width="30">
<polygon points="396.6,352 416,331.3 256,160 96,331.3 115.3,352 256,201.5 "/>
</svg>
</div>

I had the same problem and solved it by using jquery .offset() instead.
http://api.jquery.com/offset/
$('#yourFineElement').offset({ top: X, left Y)});

Webkit scrollbar dynamic styling

I'm currently styling the scrollbar using Webkit's ::-webkit-scrollbar CSS properties and would like to change these properties on a mousemove event. The problem is that I can't seem to find a way to get to the scrollbar's CSS dynamically.
Is it possible to style the webkit scrollbar dynamically, through javascript (possibly using jQuery)?

There is a nice workaround for this problem, you can add multiple css classes with diffident styles for the scrollbar, and then change the classes dynamically with Javascript.
Example:
.red::-webkit-scrollbar { ... }
.blue::-webkit-scrollbar { ... }
A button that toggles between the classes red and blue:
$("#changecss").on("click", function(){
$(".red,.blue").toggleClass("red").toggleClass("blue");
});
Here is a working fiddle: http://jsfiddle.net/promatik/wZwJz/18/

Yes, you can do it.
You need to include dynamically css style rule into stylesheet.
And then to change it.
You can do it by this plugin
If you don't need to use jQuery - you can do it by pure Javascript:
link 1
link 2.
But there is cross-browser problems.
Also see Setting CSS pseudo-class rules from JavaScript

If you want to change a scrollbar properties when mouse is over it. You can do it with CSS, here an example http://jsfiddle.net/olgis/7Lg2R/ (sorry for ugly colorset).
If you want to change scrollbar colour if the mouse is over a container then look at this post Style webkit scrollbar on certain state . There are described several ways of doing it, with and without JavaScript.
REMARK: I do not know for which reason none of those example (with CSS neither JavaScript) do NOT work in my Firefox 11 for Mint, but all of them works perfectly in Chrome 18.0.1025.151.

i created page with four tabs each different color set as well as scroll bar
however this only worked by giving class to body tag
body.greenbody::-webkit-scrollbar {
width: 10px;
}
body.greenbody::-webkit-scrollbar-track {
background-color:rgb(0,50,0);
}
body.greenbody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollGreen.png");
}
/
body.bluebody::-webkit-scrollbar {
width: 10px;
}
body.bluebody::-webkit-scrollbar-track {
background-color:rgb(0,0,50);
}
body.bluebody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollBlue.png");
}
html
<body id="body" class="greenbody" bgcolor="#202020">
javascript for each tab button(only scroll bar section shown here)
document.getElementById("body").className="greenody";
.........other function()....
document.getElementById("body").className="bluebody";
ScreenShot1 GreenScrollBar Image
ScreenShot2 BlueScrollBar Image

For this you should replace the scrollbar altogether.
It's just a matter of picking whichever one gives you the easiest API.

You can style scrollbars with CSS3, these generally only work for internal scrollbars and not the actual browser main scrollbar. You can also add the MOZ attribute to the following.
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: none;
}
::-webkit-scrollbar-track-piece {
background-color: #3b3b3b;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
-webkit-border-radius: 6px;
background: #666 url(scrollbar_thumb_bg.png) no-repeat center;
}
Demo: http://geryit.com/lib/custom-css3-scrollbars
Download Source: http://geryit.com/lib/custom-css3-scrollbars/custom-css3-scrollbars.zip

you can make a <style> tag with id="scrollbar_style" and then add css inside it dynamicly like this :
document.getElementById('scrollbar_style').innerHTML = '::-webkit-scrollbar{width:15px;}';
just remember that using innerHTML on an element WILL NOT JUST ADD your new code, it WILL ALSO DELETE whatever was inside that element.
problem solved.

you can define a function in JavaScript with your own css.
function overFlow(el) {
el.style.cssText = "overflow: auto;";
}
using in html:
<style>
::-webkit-scrollbar{display = none;}
</style>
<div id="overFlow" onclick="overFlow(this);">Something</div>
More Info: https://css-tricks.com/almanac/properties/s/scrollbar/

How can I disable a browser or element scrollbar, but still allow scrolling with wheel or arrow keys?

I want to hide any scrollbars from my div elements and my whole body, but still let the user scroll with the mouse wheel or arrow keys. How can this be achieved with raw JavaScript or jQuery? Any ideas?

Like the previous answers, you would use overflow:hidden to disable the scrollbars on the body/div.
Then you'd bind the mousewheel event to a function that would change the scrollTop of the div to emulate scrolling.
For arrow keys, you would bind the keydown event to recognize an arrow key, and then change scrollTop and scrollLeft of the div as appropriate to emulate scrolling.
(Note: you use keydown instead of keypress since IE doesn't recognize keypress for arrow keys.)
Edit: I couldn't get FF/Chrome to recognize keydown on a div, but it works in IE8. Depending on what you needed this for, you can set a keydown listener on the document to scroll the div. (Check out the keyCode reference as an example.)
For example, scrolling with the mouse wheel (using jQuery and a mousewheel plugin):
<div id="example" style="width:300px;height:200px;overflow:hidden">
insert enough text to overflow div here
</div>
<script>
$("#example").bind("mousewheel",function(ev, delta) {
var scrollTop = $(this).scrollTop();
$(this).scrollTop(scrollTop-Math.round(delta));
});
</script>
(This is a quick mockup, you'd have to adjust the numbers since for me, this scrolls a bit slowly.)
keyCode reference
mousewheel plugin
keydown, keypress # quirksmode
Update 12/19/2012:
The updated location of the mousewheel plugin is at: https://github.com/brandonaaron/jquery-mousewheel

What about a purely CSS solution?
Solution 1 (cross browser but more hacky)
#div {
position: fixed;
right: -20px;
left: 20px;
background-color: black;
color: white;
height: 5em;
overflow-y: scroll;
overflow-x: hidden;
}
<html>
<body>
<div id="div">
Scrolling div with hidden scrollbars!<br/>
On overflow, this div will scroll with the mousewheel but scrollbars won't be visible.<br/>
Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>
</div>
</body>
</html>
Solution 2 (uses experimental features, may not support some browsers)
Just add the nobars class to any element you want to hide the scrollbars on.
.nobars {
/* Firefox: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width */
scrollbar-width: none;
/* IE: https://msdn.microsoft.com/en-us/library/hh771902(v=vs.85).aspx */
-ms-overflow-style: none;
}
.nobars::-webkit-scrollbar {
/* Chrome/Edge/Opera/Safari: https://css-tricks.com/custom-scrollbars-in-webkit/ */
display: none;
}
Solution 3 (cross browser javascript)
Perfect Scrollbar doesn't require jQuery (although it can utilise jQuery if installed) and has a demo available here. The components can be styled with css such as in the following example:
.ps__rail-y {
display: none !important;
}
Here is a complete example including the implementation of Perfect Scrollbar:
<link rel="stylesheet" href="css/perfect-scrollbar.css">
<style>
#container {
position: relative; /* can be absolute or fixed if required */
height: 200px; /* any value will do */
overflow: auto;
}
.ps__rail-y {
display: none !important;
}
</style>
<script src='dist/perfect-scrollbar.min.js'></script>
<div id="container">
Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>
</div>
<script>
// on dom ready...
var container = document.getElementById("container");
var ps = new PerfectScrollbar(container);
//ps.update(container);
//ps.destroy(container);
</script>

You dont have to use jquery or js to make this. Its more performant with simple webkit.
Just add the code below to your css file.
::-webkit-scrollbar {
display: none;
}
Caution !
This will disable all the scrollbar so be sure to put it in a specific class or id if you just want one to be hidden.

I much prefer SamGoody's answer provided to a duplicate of this question. It leaves native scrolling effects intact, instead of trying to manually re-implement for a few particular input devices:
A better solution is to set the target div to overflow:scroll, and wrap it inside a second element that is 8px narrower, who's overflow:hidden.
See the original comment for a fleshed-out example. You may want to use JavaScript to determine the actual size of scrollbars rather than assuming they are always 8px wide as his example does.

To get this working for me, I used this CSS:
html { overflow-y: hidden; }
But I had problems using $(this).scrollTop(), so I bound to my #id, but adjusted the scrollTop of window. Also, my smooth scrolling mouse would fire lots of 1 or -1 deltas, so I multiplied that by 20.
$("#example").bind("mousewheel", function (ev, delta) {
var scrollTop = $(window).scrollTop();
$(window).scrollTop(scrollTop - Math.round(delta * 20));
});

As Baldráni said above
::-webkit-scrollbar { display: none; }
Or you can do
::-webkit-scrollbar{ width: 0px; }
(posted for other people that stumble on this from google search!)

Well, perhaps not the most intuitive in my opinion, but I can imagine you being able to make it a decent experience, give this a try.
overflow:hidden;
make sure the parent object has a height and width, and displays as block