On my page https://itc-ms.de (Delphi/Intraweb/IWBootstrap using bootstrap 3.3.7) I use the css
body {
...
overflow-y: scroll;
...
}
to avoid flicker when switching between pages of different length due to the scrollbar appearing and not.
Unfortunately the scrollbar disappears if a bootstrap popup is shown (like my login dialog shown when clicking on "Anmelden").
I already tried
overflow-y: scroll !important;
but this does not work as it just applies a scrollbar to the layer above the page body when a pop up is rendered. The page scrollbar still disappears moving the page contents and creating the flicker.
Is there a css way to make the scrollbar of the page body persistent also when a popup is shown?
Thanks in advance.
Related
I'm trying to fix an issue where when a user clicks a button it causes the entire page to shift to the left. The issue only seems to appear when the browser is maximized.
You can try it yourself here: https://professionallyspeaking.oct.ca/exemplary.aspx
Click on the "Great Teachers- Alphabetical +" button to see the shift in action.
The page is adding a vertical scroll bar when the content height exceeds that of the browser window. It is default behaviour, but if the shift seems odd to you, the only way to "fix" it is to force the scroll bar on the <body> when the content doesn't fill the page, by adding the following css:
body{
overflow-y: scroll;
}
Page was shifting due to appearance of the vertical scrollbar. Thanks to #j08691 for pointing this out. I resolved the issue by applying overflow-y: scroll to the html:
html {
overflow-y: scroll;
}
I have a really big bug on the iphone, that makes a page unusable and I just can't solve it. I can't find any topic about this issue as well.
I have the following screen:
In the middle, there is a div, which is set on -webkit-overflow: auto; to have smooth scrolling inside this div. The scrolling is working absolutely fine and smooth.
BUT only until I do a touchmove on another element outside of this div. If I do this and try to scroll the scrollcontainer again, it's frozen and not moving at all. After I tap around a few times on the scroll container it's scrolling again.
It's losing the scroll focus of the scroll container and trying to scroll a parent.
So, if I do a movement like this:
This looks like this :
Note: I'm just doing one touchmove from the bottom container into the overflow div. After releasing the finger and then trying to scroll again, it still scrolls the parent div.
I made a short example, so you can have a look with your iphone/phone here.
This issue only appears when using -webkit-overflow: auto With normal overflow: scroll it's always working but yes... you know how laggy this scrolling feels.
Is there any way to force the scroll focus in the desired container, when you're clicking/tapping a container with -overflow-scrolling: touch;?
The iOS Safari Browser never really gives you full control over the scrolling.
However there is a "hack" you can use, it requires JS tho:
set position: fixed on body,html
As soon as a touchmove occurs, set the body.scrollTop = 0
So in your case add:
CSS
body, html {
margin: 0;
position: fixed;
}
JS
document.addEventListener('touchmove',function (){
document.body.scrollTop = 0
})
Example page for testing on device
Btw, a better way for handling this would be to make the headline/controls fixed and add a padding to the scrollcontainer. This wouldnt require any JS.
try it
I too had this issue, my website worked fine on android phones, but on ios, i had to tap few times, to activate scroll.
I tried disabling body scroll, even tried this
-webkit-overflow-scrolling: touch; /* Lets it scroll lazy */
-webkit-overflow-scrolling: auto; /* Stops scrolling immediately */
I had to use custom scrollbar plugin mCustomScrollbar
This plugin completely overrides the system scroll. Here javascript controls the positioning of the scroll content. It makes the content position:relative and uses top to scroll the content.
If this plugin doesn't work for you, you can try any other scroll plugin. They all work the same way.
On my website https://www.hcldesign.co.uk/ you can see that I have a top banner.
This banner has a button saying 'see website example' and when this is pressed it changes the slide image. Now this also causes a weird screen position glitch with my navbar and content/body section.
When you click the button you can see a gap appears on the left of the body and pushes some content to the right by a few pixels and then flicks back. The position of the navbar also does the same when the button on the slider/banner is clicked.
I have tried messing with the position code for some of the elements but can't seem to fix this.
I need to keep the page content in the same position when the button is clicked.
Its caused by this CSS rule:
.ls-overflow-hidden {
overflow: hidden;
}
This class is added to your <body> element when clicking "see website example". Change the value to i.e. overflow: auto; and the glitch should be gone.
On clicking the button of the slider .ls-overflow-hidden class is added to the body. You can fix it by the css rule
body.ls-overflow-hidden {
overflow: auto;
}
I'm doing a wp site, using woocommerce, and a quick view plugin which gives you a popup small window preview of a page existing elsewhere.
What i'd like to do is to remove the scroll bar from the popup window but not from the real page.
Is it possible through css?
Using this in custom css, without success, so i'm thinking to hide the scroll bar from the page this popup shows, but then it'd disappear from the full page too obviously:
.xoo-qv-container {
height: 570px !important;
overflow: hidden !important;
}
I am doing a popup light box by using the code I found in this article HTML / CSS Popup div on text click.
Now I am trying to disable the main scrolling of the page, since the light box has a fixed height, but certain pages are longer then the popup which leads to scrolling the background of the popup which in this case is the page itself.
I played a bit with overflow but without success.
Try the following CSS:
html {
height: 100%;
overflow: hidden;
}
Also, if you trigger this code on a random location in the page, you might need to do extra work.
Do you have a jsfiddle or codepen?