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;
}
Related
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;
}
For some reason, the styling of my scrollbars changed.
I did not change any of the overflow styling (I am using overflow-y: scroll for my divs).
The scrollbar used to disappear when the div was not being scrolled, similar to the scrollbars used in the Facebook chat.
Now it has this static border and the scroll bar does not disappear:
I am using Chrome as my browser.
You can some some javascript which detects when user scroll then show scroll bar
here is a snippet
function scroll(e){
e.target.style.overflow='scroll';
}
function noscroll(e){
e.target.style.overflow='hidden';
}
document.getElementById('div').onwheel=scroll;
document.getElementById('div').onmouseout=noscroll;
div {
width:200px;
height:100px;
border:solid black;
overflow-y: hidden;
}
<div id="div">
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
This is a line
</div>
If you want the scroll bar to appear only when there is something to scroll in, use overflow: auto instead of overflow: scroll
One way is to create a custom scroll pane. Then it is easy to set the opacity of the scrollbar to zero when the mouse leaves it, something like
scrollpane.onwheel = function(){
scrollbar.style.opacity = 1;
};
scrollpane.onmouseout = function(){
scrollbar.style.opacity = 0;
}
Another way would be to hide the scrollbar with another element on top of it. You can create an outer div with overflow:hidden and an inner div with overflow:scroll. Then set absolute sizes for both divs and make the inner div about 20px bigger than the outer div. This should hide the scrollbar.
I'd like to add that it's hard to answer such a vague question. It would have been easier if you wrote your code into your question.
EDIT:
I have created a working jsfiddle with a custom scrollbar.
Custom scrollbars are a bit difficult because many events are involved, and they work differently in different browsers. For example, it might not work well on mobile devices. I have disabled text selection during dragging the slider, but this doesn't work the same on all browsers.
I even managed to prevent scrolling on the page while the cursor is in the custom scroll pane.
I hope that this meets your expectations!
Aloso
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?