I was viewing some Facebook photos. I observed this thing, when you click on an image, it opens as a modal overlay. The background is still hazily visible, the scroll pane is still there, but the scroll bar just disappears. Can anyone tell me how to do it? I mean, setting body's overflow to hidden will make the entire scroll pane disappear. Here the scrollpane is there, but the scrollbar is not..
i think what youre looking for is the osx-like scrollbar that fades out when not being used.
see Lion-like scrollbar with jQuery?
Related
I have a strange question -- my apologies if it is a silly one. Please note the code it too large to reproduce in a snippit so I am posting the link here.
The page I am building is a small intranet page with a full width header. When the user clicks on the button beside the submit button, a div from the top opens and pushes the content down. My problem is in my code editor there is no scroll bar on the page, so when the div opens it pops the entire page slightly over to the left to compensate for the scroll bar.
On codepen, I've pasted the shell of the site, but because a scroll bar is included in its code area, the problem cannot be reperoduced exaclty.
Is there any way I can compensate for the lack of scroll bar in my code? Perhaps force one to be there?
Any help would be grand.
You can force a vertical scrollbar by adding the following CSS rule to the body:
overflow-y: scroll;
EDIT: I misunderstood your question.
Have the whole moving element absolute positioned and wrap it around a container. The scrollbar will appear on the wrapping container, not on the element itself. And because it will be with position absolute there won't be any change of position once the scrollbar appears.
I would like to create a dynamically sized background with a sticky bottom element that fills the entire viewport but stays put when scrolled. Invisionapp is having a similar effect on their homepage. They are having this "trusted by" bar that appears at the bottom when you launch their page but when you scroll, it just stays still.
Any help would be appreciated.
I got my tabs working how I want - please view the site here:
http://beelinetest.site50.net/uw_virtual_tour.html#
Does anyone know how I can hide the content at the bottom of the screen (scroll down), this is the info that slides up when the tab is clicked. But make sure it appears as it slides from behind the footer?
In CSS, add overflow: hidden to your #maincontentcontainer element.
I have a iframe(https) within a div. The div(lightbox overlay) has overflow-y:auto;overflow-x:hidden; which causes a vertical scroll bar to appear. the content of iframe is much bigger than the height of overlay and the overlay scroll bar doesn't scroll the whole iframe content.the iframe scrollbar is hidden by the overlay scrollbar.I want to scroll over the whole iframe content. I face this issue only in IE.
The overlay is used at many places so I cannot directly modify its styles.
Had anyone faced this kind of problem.
Please assist if anyone has any idea how to hide the overlay scrollbar in order to view the iframe scroll bar.
I've got this fixed by playing around with the styles.
I created a new style 'div.iframe-overlay' in css, which is same as the style 'div.overlay' but without overflow-y:auto;overflow-x:hidden;
Then toggle the class of div from 'overlay' to 'iframe-overlay' only for IE browser.
This helped the scroll bar to appear properly.
I have an absolute DIV with a large top css value. It begins as a hidden DIV and is revealed by slideToggle (jquery) when a button is pressed. This is fine for divs at the top of the page.
If there is a button off the bottom of the window, and needs to be scrolled down to - when it is clicked the hidden DIV appears beside the button because of its large top value - 400px or bigger. However the window goes back to top of page, and you have to scroll back down to view the content.
Can the window be stopped from jumping to top, and have the revealed DIV in the same position, yet dont have to scroll to see it?
I think the question you asked and the answer you want is very similar to this:
How do I stop a web page from scrolling to the top when a link is clicked that triggers JavaScript?