We Keep Coding

How can I hide a scrollbar smoothly?

I need to hide the body scrollbar smoothly. I have tried overflow:hidden with transition but it does not work. Thanks in Advance

Unfortunately there is no 'Short and simple' solution to do this. A scrollbar is not an element by itself, so you're going to end up having to make it yourself, and adding the hover or click effect on it or a different element. Fortunately there are other StackOverflow users that have done this before and shared this with us so that we can use this in the future and learn from it. The latter being the main reason of course, since that is what SO is mostly for.
See this JSFiddle.
This fiddle imitates the functionality of Facebook's scrollbar that fades out when you are not hovering over it anymore. All you need to do is make it work with a click() event instead of the hover() event.

I know I'm a bit late but you helped me out so I might as well try to help back haha.
The selector ::-webkit-scrollbar could be modified to have an opacity of 0 and you could apply overflow: hidden at the same time if you wrote it in jQuery or JS. Like add ::-webkit-scrollbar { opacity: 0; transition: all .25s;} whenever you're trying to.
Got the selector from this article.
https://css-tricks.com/custom-scrollbars-in-webkit/

You can use below code to hide scroll bar
This will hide all scrollbars for textareas.
textarea
{
overflow:hidden;
}
You can also use the id or class of the textarea to make it only that one
textarea#txt
{
overflow:hidden;
}

This will hide scroll smoothly as per your need
jQuery('html,body').stop().animate({scrollTop:900 },500,function(){});

Sticky Menu - Hides on some pages but not others

The sticky menu on our site (http://462184.hs-sites.com/) is experiencing issues on some pages and not others.
For example the homepage, if you scroll half way down the page and try to use the menu, it hides momentarily. On the other hand we don't get this issue when on another page such as (http://462184.hs-sites.com/bookkeeping-plans).
Therefore I can only imagine it is some type of element on those pages conflicting?
Your support is greatly appreciated :)

Try removing overflow hidden from this element:
.header-container {
/* overflow: hidden; */
}
Just remove the line, or you can replace it with overflow:initial or overflow:auto;

Scroll not working on Android Chrome only

For some reason scroll doesn't work on Android Devices in Chrome browser only.
You can see the site at Peshkuiarte.com/mobile
I have tried:
$(document).ready(function() {
$('body').css('touch-action', 'auto');
});
I can't seem to figure it out ... Any help would be greatly appreciated

By scroll do you mean dragging the page with your finger on mobile?
You've set -webkit-user-drag: none; as an inline style for body, which might be the cause.
It's a Webkit-specific property:
CSS property: -webkit-user-drag
Description
Specifies that an entire element should be draggable instead of its contents.
Syntax
-webkit-user-drag: auto | element | none;
Values
auto The default dragging behavior is used.
element The entire element is draggable instead of its contents.
none The element cannot be dragged at all.
It's supported by Chrome 1-17 and Safari 3-5.1: http://www.browsersupport.net/CSS/-webkit-user-drag

we had same problem on Chrome 40.0... and we fixed with css only solution. Maybe it is not clean but works for us:
#media screen and (max-width: 1024px) {
html, body {
z-index: 0 !important;
overflow: scroll !important;
}
}

In my case, I have found touch-action: none added on body element.
Removing it enabled scrolling in android chrome.
Summary
The touch-action CSS property specifies whether, and in
what ways, a given region can be manipulated by the user (for
instance, by panning or zooming).
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
Hope it helps people dealing with legacy code :)

e.preventDefault
function handlerSwipe(e){
e.preventDefault();
if(handlerTouch){
if(e.changedTouches[0].clientX>=110)
toggle.checked=true;
else toggle.checked=false;
}
return false;
}
window.addEventListener("touchmove", handlerSwipe, false);
This was the code i used for creating a swipeable navigation drawer because of this scrolling was not working .Just removing the e.preventDefault(); from the above code solved my problem

I am not really sure about the question, you say "scroll" but the accepted answer is talking about "drag". So I am going to give you what I think you are asking (not being able to scroll within an area on a mobile).
The simplest solution is a CSS one rather than a JS one. If you have an area on your page that you need to scroll, for example a code block on a tech blog you can set position relative on the area and have overflow-x set to auto. On the body you will need to have it not move when you touch the screen.
pre {
white-space: pre-wrap;
overflow-y: auto;
position: relative;
}
html,body{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
You can see this solution working on my blog if you look at the code snippet sections and try and scroll on them via chrome mobile.(http://fullstack.life/mapping_arrays.html)

pointer-events
I came across another issue today and I'm going to leave this here for reference. If the element with the overflow-y: scroll; either sets its pointer-events: none; or inherits it, then it won't work either. On this layer, pointer events need to be re-enabled with:
pointer-events: auto;

Here is the fix for this issue that worked for me.
When you call the niceScroll function $("body").niceScroll(); in your javascript class, it appears to add an inline style of: overflow-y: visible on your body element (because it is inline, it overrides any previous overflow: hidden that you may have written in your css file.
Simply add overflow: hidden ! important in the css of your body element.
Also, make sure that your html element has style of
overflow: hidden;
touch-action: none;

how scrollable text line inside a div without showing scroll bars

plz see the below link :
Long File Name Inside A Div
when you see those long file names with firebug you will find a span that tell us ->
.FileName {
float: left;
width: 438px;
}
we have predefined width for this span!
q#1 : so why we have overflow in that div and how can i fix that ?
q#2(important) : is it possible to make that file name scrollable without showing scroll bars ?
edit
(with jquery or javascript or css)
thanks in advance

You have an overflow because this text can't break (there are no spaces):
R1DA029_APP_SW_1212_2395_GENERIC_KT_REDBROWNBLUE_CID52_49_DB3210
You could change the span's into div's and give them a height and an overflow:hidden.
Html:
<div class="FileName">R1DA029_APP_SW_1212_2395_GENERIC_KT_REDBROWNBLUE_CID52_49_DB3210 asangsm.com.rar</div>
Css:
.FileName{
float: left;
width: 438px;
height: 20px;
overflow: hidden;
}
I don't think it's possible to make that file name scrollable without showing scrollbars.

If you don't want a scrollbar, but do want to scroll, then the most apparent solution would be to use some javascript. If you're into jquery, here's some:
http://www.net-kit.com/jquery-custom-scrollbar-plugins/
I've tried one of them (http://www.demo.creamama.fr/plugin-scrollbar/), setting the div containing the text to overflow: hidden; and the div containing the scrollbar to display: none; to mimic your situation, and that gives me a scrollable div with no scrollbar.
However, I think from a UI point of view it's not the best idea to have a scrollable section without a scrollbar. At least something should light up (as with the Mac OS Lion scrollbars) indicating you can, or are, scrolling. You could style one of the javascript solutions out there to make this happen, for instance with a tiny scrollbar or indicator.

Short of using CSS3's marquee, I can see no simple solution. You would have to use Javascript.
As per avoiding the line break, you can use white-space: nowrap;.

How can I disable the scroll bars of a page?

how to disable the scroll bars of the page.
and disable this button.

The scrollbars are a CSS issue. You can add this to your page (or the inner part to a CSS file):
<style type="text/css">
html, body {
overflow: hidden;
}
</style>

You can't disable that button (or any other method of scrolling the page); see this. However, you could scrollTo(0,0) anytime you detect scrolling. This might look ugly (page scrolls a bit, then jumps back up).
For disabling the scrollbars, you can try setting html, body { overflow: hidden }; I think some browsers may not honor this.
(Wouldn't it be better to just create a page that fits into the viewport, so that the scrollbars aren't shown?)

$(window).scroll(function() {
scroll(0,0);
});
If you want to use it you need to have jQuery imported.

document.body.scroll = "no";
document.body.style.overflow = 'hidden';
document.height = window.innerHeight;
should disable the scrollbars in most browsers.
See: http://www.eggheadcafe.com/community/aspnet/3/10088543/how-to-disable-document-body-from-scrolling.aspx

I am making a mobile website, but I don't want it to be a whole bunch of webpages, so I am making it one page with scrolling disabled. I did this with
<style>
html, body {
overflow: hidden;
}
</style>

This will remove your scroll bar. [I did it by accident]
#media screen{
body>div#header{
position:fixed;
}
body>div#footer{
position:fixed;
} `

This works:
* {overflow: hidden}
One problem I have when figuring it out was that I have a CSS drop-down (well slide across) menu on the page and that doesn't show when I use this method. I am still trying to figure out how to get the drop-down to work with this enabled.