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?
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;
}
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;
}
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.
In my prestashop site I have the following problem:
using my mobile phone, if I scroll the page http://www.forwardmilano.it/presta/index.php?id_category=3&controller=category
slowly, when f.e. the div with class="breadcrumbs" disappears, the page has a vertical jump that my customer doesn't want to see.
How can I do editing only my customcss.css?
Thanks in advance
So what happens is when the .navbar gets the position fixed, the height of the header.variant4 changes, which causes the jump. Thus, the breadcrumbs goes under the navbar.
To solve the issue, you may want to set the height to the header.variant4.
You may want to apply the following CSS and it will solve it for you:
header.variant4 {
height: 129px;
}
I have a lightbox at my website. It is a shadowbox script which opens me an iframe. The iframe has it's own scrollbars at the right. Is there any way to turn off the scrollbars from main/top window?
Maybe a overflow: visible or a overflow: hidden may work?
The overflow CSS property specifies what happens when the content inside the element overflows the element.
See this MDN page for more details
UPDATE: The OP has clarified.
You should use something like this:
#your-lightbox-box-which-has-scrollbars-which-you-do-not-want {
overflow: hidden;
}