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.
Related
Whenever I scroll on the sidebar (which is position fixed) it should disable the page from scrolling. It doesn't mean that the body should be overflow hidden or hide the scrollbar on the body or page itself. It should just prevent the whole body/ page from scrolling when place the cursor on the sidebar and try to scroll it. The sidebar on the other hand doesn't need to have a scrollbar or more content inside it.
I have a codepen with the layout made with html and css/sass. But I'm not sure if this problem can be solved with pure css or if javascript is needed.
I'm using full-screen modals on my site on mobile. The problem is that touching the modal will cause the body page to move even though it's overflow:hidden;
Here's what bootstrap says about that:
Support for overflow: hidden on the element is quite limited in
iOS and Android. To that end, when you scroll past the top or bottom
of a modal in either of those devices' browsers, the content
will begin to scroll.
What can I do to prevent that?
Setting the body to position:fixed causes the scroll to jump to the top in an ugly way. What's the best solution if anyone came up with one?
I had the same question myself before.
What I did is changed the body to overflow:hidden and fixed height equal to modal height and remembered document scroll position. After closing the modal, I've applied remembered scroll position back and height to auto.
It is so complicated because I needed my modals to be bigger than window and I wanted to be able to scroll the modal.
I need to disable ANY kind of vertical scrolling within an overflown DIV (I would still be able to scroll it horizontally).
overflow:hidden with CSS won't work since you can still scroll with the mouse wheel click / smartphone touch scroll. The only thing this does is hide the scroll bar, not disable it.
Is there any way to do this with Javascript or jQuery?
Thanks in advance.
Have you tried reducing the height of the div so there is no where to scroll.
You could put the screen height into a variable (or slightly less) and then make the div the same height therefore cutting off any content with the overflow hidden.
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?
I have a three-column layout of three news scrollers (using Tiny Scrollbar http://baijs.nl/tinyscrollbar/).
Business needs dictate that this page function in IE7. To further complicate things, each div contains an iFrame, as each of these scrollers had to be a separate HTML file. If I position the divs as relative, when a user clicks on the scrollbar to scroll, the entire frame shifts to the left a few pixels. Holding down and moving the mouse will move it side to side. When I position the divs as fixed, the frame stays in place but it's content (links, scrolling, etc.) are completely disabled.
I apologize in advance, I'm fairly new to these things and learning as I go. Any suggestions?
I guess that content shifts to left because browser's scrollbar appears. You can disable scrollbars of iframe. Add some style to iframe tag like the following:
<iframe style="overflow:hidden;"></iframe>
If it is not enough, add some attributes to the body tag of the page which is loaded into iframe like:
<body style="overflow:hidden;" scroll="no">