jQuery: How do I scroll the body without showing the scroll bar? - javascript

I'm trying to hide the scroll bar of the document (in some browsers it's the body element, in others it's the html element) by using overflow:hidden;. Then i'm using jQuery.animate() to try and animate the scrollTop property. It works fine when the scroll bar is visible (i.e. without the overflow:hidden; style) but doesn't work when the scroll bar is hidden. Why is that? I'll be able to post a link to a snapshot of the problematic page in a bit...

Try make <body> overflow:hidden and animate the margin-top property, note the margin-top should be negative if you want a positive scrollTop.
On webkit you could use ::-webkit-scrollbar: { display: none; } to hide the scrollbar with scroll features enabled.

Related

Chrome scrollbar takes up space but is invisible till styled

I have a PWA where I turn off scrollbars. for Chrome I've used: -
::-webkit-scrollbar {
display: none;
}
Now for non-touch PC users I want to turn scrollbars on for certain elements. The problem is when I get rid of "Display: None" I get the space for a scrollbar but it's invisible. When I style it (eg: background-color) I can see it.
Why is it invisible?
Just make document scrollbar invisible, pseudo selector can be tied to an element.
html::-webkit-scrollbar,
body::-webkit-scrollbar {
display: none;
}
Spewin' When you define the pseudo element you have to take control of ALL attributes :-(
Remove the CSS pseudo-element definition completely an the scrollbars go back to defaults.

Programmatic scroll on a div with parent with overflow-x hidden

It is exactly what it is described in the title.
I have a parent which has overflow-x: hidden.
I have 3 rows which has some content overflowing.
In this scenario I am not able to programmatically scroll one of the rows.
JS Fiddle: https://jsfiddle.net/w6v1xydn/5/
But if I change the rows to have overflow-x: auto, programmatic scrolling works but it also shows up a horizontal scrollbar.
JS Fiddle: https://jsfiddle.net/w6v1xydn/6/
Question: I want to understand why it is happening like that. And how can I get the scroll to work without the horizontal scrollbar showing up? (And no hiding the horizontal scrollbar using css is not an option)
PS: Would prefer a no plain HTML/CSS/JS answer. No jQuery
Update 1: Parent positioning doesn't seem to affect this
It works if you move
overflow-x: hidden
onto the row-class instead.
And you really don't need the overflow-x: hidden on the container as every item you put inside it so far has its width set to 100%.
Look here: https://jsfiddle.net/cornelraiu/w6v1xydn/8/
Setting the children divs to position relative like this:
#container > div {position: relative;left:0}
and then in js:
document.getElementById("row1").style.left = '-50px';
This should work

Lock page scroll temporarily in the middle of the long page

Ok, so there is a webpage with a long list. In the middle of the list I'd like to lock the scrolling and later enable it again. How would this be possible, so that it would behave nicely in modern mobile browsers?
One solution I tried is to set body position style to fixed and the setting top style to the scrollTop value prior to the setting position to fixed. There is this thing about position: fixed - as soon as it is set, the page will be jumped to the top. Problem is that on iOS Safari the page is sort of flashes when you enable/disable scroll, and it also gets really laggy behaviour on Android Chrome.
Any better hints?
Update: I have a sidebar menu with list of items, and while the main page should be locked, sidebar menu should remain scrollable.
Just add a class to the html-tag every time you want to look the screen. I use this method on js modals or lightboxes.
You can do this simply by adding the overflow attribute.
.
CSS:
html.-is-locked {
overflow: hidden !important;
}
.
JS:
Now you just have to add/remove the class with javascript:
//Get HTML element
var html = document.querySelector('html');
//Activate
html.classList.add('-is-locked');
//Deactivate
html.classList.remove('-is-locked');
//Toggle
html.classList.toggle('-is-locked');
Try this on the body instead of position:fixed:
body.locked{
height: 100vh;
overflow: hidden;
}
It will keep the scroll position but prevent scrolling.

Google Plus - Scroll in div, prevent body scroll? [duplicate]

1) If you have a Google Plus account, go to your home page.
2) On the right side, there's a list of "Add to Circle" buttons that you can hover over.
3) Notice that when you hover over one of the Add to Circle dropdown (if you have enough circles to have scrolling in the dropdown) the page scrolling feature is disabled. Only scrolling vertically in the dropdown is allowed.
How is this done with javascript?
I can scroll in here (the scroll bar on the right), but can't scroll on the page body while this is dropped down.
The have an element that has a fixed height and is overflow auto, they styles the scrollbar with this trick: http://beautifulpixels.com/goodies/create-custom-webkit-scrollbar/
You could make it work in FF and IE to: Basically you nest a element that is overflow auto into a other and hide the scrollbar with a negative margin. Then you capture the scroll event on that same element and adapt the slider on the right side according to the scrollTop position.
Here is how i would do it: http://jsfiddle.net/kGbbP/4/
But there are many jquery plugins that can do this:
http://www.net-kit.com/jquery-custom-scrollbar-plugins/
this isn't made via JavaScript!
It's pure CSS, and works only on (non-mobile) webkit based browsers.
Here is the CSS code, just include it in a CSS file, attach it to an HTML document, and run the .html file.
Here is a demo: http://jsfiddle.net/3ZqGu/
And here is the CSS code:
::-webkit-scrollbar {
background:transparent;overflow:visible; width:15px;}
::-webkit-scrollbar-thumb {
background-color:rgba(0,0,0,0.2); border:solid #fff;}
::-webkit-scrollbar-thumb:hover {
background:rgba(0,0,0,0.4);}
::-webkit-scrollbar-thumb:horizontal {
border-width:4px 6px;min-width:40px;}
::-webkit-scrollbar-thumb:vertical {
border-width:6px 4px;min-height:40px;}
::-webkit-scrollbar-track-piece{
background-color:#fff;}
::-webkit-scrollbar-corner {
background:transparent;}
::-webkit-scrollbar-thumb {
background-color: #DDD;}
::-webkit-scrollbar-thumb:hover {
background-color: #999;}

Is it possible to implement vertical scroll bar in a drop down menu using CSS alone?

I would like to implement a vertical scroll in a drop down menu when the options in the menu exceed 8.Is it possible to achieve this by using Css properties alone?Please let me know how I should go about this
Set an "overflow: auto" property on the containing div. To collapse the div if it is less than 8 items then you will need to use the max-height: property. It will not work for IE6 so use a hack to get around IE6.
That is absolutely possible using CSS. All you need to do is set a fixed height on the menu (so set the height to however tall 8 items is) and give it overflow-y: auto. This tells the browser that if the fixed height is exceeded, a vertical scrollbar should appear.
on your ul li ul add the height you want for example height:80px; and overflow-y:auto;

Categories

Resources