I have a bootstrap modal and on showing that, the background should not be allowed to scroll. I could use overflow: hidden for the item list container. But it causes the page scroll to top and it should not be allowed. Any idea?
Have you tried with:
html { overflow-y: hidden; }
Hope this helps!
Note that this will disable the scroll bar.
Related
http://birdbreath.com/bb/sticky_navbb4.html
It begins the scroll properly, setting the right classes and suddenly scrolls left off the page.
I have tried a variety of things including overflow-x: hidden; .
Any suggestions?
Thanks
Did you add height and width property into your class? Could you clarify more, what do you want?
use this code in your css
#homePage{
overflow-x: hidden !important;
}
Ok, so there is a webpage with a long list. In the middle of the list I'd like to lock the scrolling and later enable it again. How would this be possible, so that it would behave nicely in modern mobile browsers?
One solution I tried is to set body position style to fixed and the setting top style to the scrollTop value prior to the setting position to fixed. There is this thing about position: fixed - as soon as it is set, the page will be jumped to the top. Problem is that on iOS Safari the page is sort of flashes when you enable/disable scroll, and it also gets really laggy behaviour on Android Chrome.
Any better hints?
Update: I have a sidebar menu with list of items, and while the main page should be locked, sidebar menu should remain scrollable.
Just add a class to the html-tag every time you want to look the screen. I use this method on js modals or lightboxes.
You can do this simply by adding the overflow attribute.
.
CSS:
html.-is-locked {
overflow: hidden !important;
}
.
JS:
Now you just have to add/remove the class with javascript:
//Get HTML element
var html = document.querySelector('html');
//Activate
html.classList.add('-is-locked');
//Deactivate
html.classList.remove('-is-locked');
//Toggle
html.classList.toggle('-is-locked');
Try this on the body instead of position:fixed:
body.locked{
height: 100vh;
overflow: hidden;
}
It will keep the scroll position but prevent scrolling.
I have a webpage at http://www.domainandseo.com/project1/index.html.
When clicked on the Search Icon on the left side of the page, the sidebar menu appears, which pushes the rest of the page content to the right. Doing this causes almost half of the page to disappear, and no horizontal scrollbar appears.
I want a horizontal scrollbar to appear when the sidebar appears so that the visitor can scroll and see the rest of the page.
Any solution?
The CSS can be found at:
http://www.domainandseo.com/project1/css/style.css
My jquery script can be found at:
http://www.domainandseo.com/project1/js/jquery.sidr.min.js
add a div (ex. wrapper) which contains your entire page with in it...and the css property for your <div class="wrapper"> will be
.wrapper{
overflow:auto;
}
to have only horizontal scroll bar
.wrapper{
overflow:auto;
overflow-y: hidden;
}
I have some content I want to show in iframe with fancybox. When I use it, it pops up with horizontal and vertical scroll bars even though all the content is inside of it. Inspecting it in Firefox shows that when I click on html everything is inside but there is a little left over that is outside of the highlighted box. The next level up is iframe.fancybox-iframe which includes the scroll bars. I looked at the css and that has padding and margins set to zero so I don't know why the scroll bars are there. Right now as far as options I just have autoSize:false. All I have inside the body of the page I want to show is a form.
If anyone wonders which class name to use
.fancybox-inner {
overflow: hidden !important;
}
And if you found a small white background you can reset it using
.fancybox-skin {
background: inherit;
}
Try adding this to the css:
.style{
overflow: hidden;
}
If it didn't help, please post your HTML and CSS.
When editing inside CKEditor, I always want the scrollbars to be shown. Is there a way to override the CSS to always show the scrollbars, even if there's nothing lower filling it up?
it should be achievable using CSS.
I have a tool using the CKEditor and I see the body tag of the iframe in which the content is edited has a class .cke_show_borders.
So you can do:
.cke_show_borders {
overflow: scroll;
}
Or to have more detailed control over the vertical/horizontal scrollbars
.cke_show_borders {
overflow-y: scroll; // vertical scrollbar
overflow-x: scroll; // horizontal scrollbar
}