I have tried almost every answer in similar thread, but could find anything that works for me.
I have following site:
A header (div span over the full width).
A left column.
A right column.
The header and the right column are fixed.
I would like the text in the left column to disappear beneath the header when scrolling.
Something like I see on many websites where a header with a message (ex. "accept cookies") stays on a fixed place.
Any ideas?
HTML:
<div id="head">
<!-- here is the code of our header -->
</div>
<div id="content">
<!-- The next block for example with the main content -->
</div>
CSS:
#head{
width: 1000px;
height: 60px;
position: fixed;
background: #fff;
z-index: 1000;
}
/* So that our next block does not run under the header, as soon as the page is loaded, add an indent. */
#content {
margin-top: 60px;
}
Everything works now.
Left column scrolling with fixed header:
.header {
overflow: hidden;
background-color: black;
position: fixed;
top: 0;
width: 100%;
}
Right column fixed (responsive):
#media (min-width: 1200px) {
.rightcolumn {position: fixed;}
}
ive put in the standard mmenu but when i open the menu my page always goes to the top of the page, is there anyway to stop that when the menu is closed again you go back to the same place on the page.
any ideas
Thanks
I had this same issue, but was able to fix it by simply removing
height:100%;
on my body and html css wrapper.
I changed my css from this:
html, body {
height: 100%
width: 100%;
margin: 0px;
padding: 0px;
}
to this:
html, body {
margin: 0px;
padding: 0px;
}
and it solved the issue for me.
I'm working on a web app that uses -webkit-overflow-scrolling:touch in several places to give the overflown divs inertia scrolling.
Since updating to IOS8, -webkit-overflow-scrolling: touch stops you being able to scroll whatsoever, and the only way I have been able to fix this so far is by removing -webkit-overflow-scrolling: touch which leaves the standard sticky scrolling. Please help!
Here is an example of one of the standard classes that works in iOS5, 6, and 7:
.dashboardScroll {
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch; /*MAKES OVERFLOWN OBJECTS HAVE INERTIA SCROLLING*/
-webkit-transform: translateZ(0px); /*HELPS THE ABOVE WORK IN IOS5*/
}
I had a similar problem with a (quite complex) nested scrollable div which scrolled fine in iOS 5, 6 and 7, but that intermittently failed to scroll in iOS 8.1.
The solution I found was to remove all the CSS that tricks the browser into using the GPU:
-webkit-transform: translateZ(0px);
-webkit-transform: translate3d(0,0,0);
-webkit-perspective: 1000;
By doing this, the '-webkit-overflow-scrolling: touch;' can still be included and still function as normal.
It did mean sacrificing the (for me, dubious) gains to scrolling performance that the above hacks gave in earlier incarnations of iOS, but in the choice between that and inertia scrolling, the inertia scrolling was deemed more important (and we don't support iOS 5 anymore).
I cannot at this stage say why this conflict exists; it may be that it is a bad implementation of these features, but I suspect there is something a bit deeper in the CSS that is causing it. I am currently trying to create a pared down HTML/CSS/JS configuration to demonstrate it, but maybe the heavy markup structure and the large amounts of dynamic data is necessary for it to happen.
Addendum: I did, however, have to point out to our client that if even with this fix the user starts trying to scroll on a non-scrollable element she will have to wait a second after stopping before being able to scroll the scrollable element. This is native behaviour.
I had this problem and found a solution. The solution is that, you have to put your content into two containers for ex:(.dashboardScroll > .dashboardScroll-inner) and give the inner container ".dashboardScroll-inner" 1px more height than the parent ".dashboardScroll" throug this css3 property
.dashboardScroll-inner { height: calc(100% + 1px);}
check out this :
http://patrickmuff.ch/blog/2014/10/01/how-we-fixed-the-webkit-overflow-scrolling-touch-bug-on-ios/
or otherwise if you can't add another container use this:
.dashboardScroll:after { height: calc(100% + 1px);}
I had the same problem in a Cordova web app. For me, the problem was that I had a parent <div> that was animated and had the property animation-fill-mode: forwards;
Removing this property solved the problem and fixed the broken overflow-scrolling.
I was not able to solve the problem with previous answers. So after a few hours a gave the iScroll library a try, iScroll. I know including an extra library (and quite sizable) to add scrolling for just iOS is not great but this is what worked for me. Just follow the readme, the lite version suffices.
Disadvantages:
Scrolling on Android now looks like crap, it is not native anymore.
It is not possible to refresh the page by scrolling anymore
You need to apply another fix for Android : Clicks not working
I am unsure if I will use it, but if you are in need give it a go.
I tried every solutions here without success. I was able to make it work by having the property -webkit-overflow-scrolling: touch; on the scrollable div AND on the parent container.
div.container {
-webkit-overflow-scrolling: touch;
}
div.container > div.scrollable {
-webkit-overflow-scrolling: touch;
overflow-y: auto;
}
Preventing touch events from surrounding elements bubbling up the DOM is another potential solution, you may notice that scrolling stops when surrounding DIV elements receive the touch or drag events. We had this particular issue in a menu that needed to scroll smoothly. Turning off those events helped stop the "sticking" of the scroll able element.
$html.bind('touchmove', scrollLock );
var scrollLock = function(e) {
if( $body.hasClass('menu-open') ){
e.stopPropagation();
e.preventDefault();
}
};
$html.unbind('touchmove', scrollLock );
I've been having some trouble with it too but in a slightly different scenario.
I do have my divs with inertia without any problems.
I have a simple JSFiddle where you can have a look.
https://jsfiddle.net/SergioM/57f2da87/17/
.scrollable {
width:100%;
height:200px;
-webkit-overflow-scrolling:touch;
overflow:scroll;
}
Hope it helps.
I used the last method in mohammed Suleiman's answer (.dashboardScroll:after { height: calc(100% + 1px);}) but the result was that I had a 100% + 1px empty space below my content. I fixed this by changing height back to 1px after 500ms. Ugly, but it works.
This was a react.js app so my code was like this:
componentDidUpdate() {
if (window.navigator.standalone && /* test for iOS */) {
var self = this;
setTimeout(function(){
self.refs.style.innerHTML = "#content::after { height: 1px}";
}, 500);
}
}
and render:
render() {
var style = '';
if (window.navigator.standalone && /* test for iOS */) {
style = "#content::after { height: calc(100% + 1px)}";
}
return (<div>
<style type="text/css" ref="style">
{style}
</style>
<div id="content"></div>
</div>);
}
I had this problem while using the angular bootstrap modal. I fixed it by creating my own stylesheet and removing the fixed width and margin in the media queries.
ORIGINAL:
.modal-dialog {
position: relative;
width: auto;
margin: 10px;
}
#media (min-width: 768px) {
.modal-dialog {
width: 600px;
margin: 30px auto;
}
.modal-content {
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
.modal-sm {
width: 300px;
}
}
#media (min-width: 992px) {
.modal-lg {
width: 900px;
}
}
CHANGES:
.modal-dialog {
margin: 0px;
margin-top: 30px;
margin-left: 5%;
margin-right: 5%;
}
#media (min-width: 768px) {
.modal-dialog {
width: auto;
margin-left: 10%;
margin-right: 10%;
}
.modal-content {
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
}
#media (min-width: 992px) {
.modal-dialog {
width: auto;
margin-left: 15%;
margin-right: 15%;
}
}
i fixed my issue by adding some inline css to the scrollable div with jquery.. adding the css to the div after the dom is loaded makes scrolling work.
$('.lightbox__scrollable-content').css('overflow-y', 'scroll');
My problem was that the body had position:fixed that came from body-scroll-lock.js. Removed it and everything worked fine.
Have seen that this piece of code could solve my problems but I don't know how or where to apply it to make it work correctly
JScrollPane.setVerticalScrollBarPolicy(VERTICAL_SCROLLBAR_NEVER);
If your aim is to hide the vertical scroll bar then use the following CSS property...
overflow-y: hidden;
In your CSS (RRD.css), you have...
.scroll-pane
{
width: 100%;
height: 670px;
overflow: hidden;
}
Try changing it to...
.scroll-pane
{
width: 100%;
height: 670px;
overflow-y: hidden;
}
More changes
And in your includes/jquery.jscrollpane.css change...
.jspPane
{
position: absolute;
width: 9660px;
}
to...
.jspPane
{
position: absolute;
width: 5880px;
}
This will remove the extended scrolling that is happening. And make sure your content-holder width is 5880px to match the jspPane scrolling ...
<div id="content-holder" style="width:5880px;">
The vertical scrollbar will not appear as long the content-holder div width is not less than the width of the content inside it. Think all your images in the content-holder div adds up to 5680px + you need to add the padding you apply as well.
I'm making a slideshow of images with the class display. I want to limit the height and width of the image to a maximum of 80% of the window's, so that there won't be a need for a scroll bar at any normal size. Here's the CSS I used:
.display {
max-width: 80%;
max-height: 80%;
}
It works exactly how I want it to work in Chrome and Safari, and Firefox acknowledges the max-width as well. But Firefox ignores the max-height, so large vertical images go off screen.
Thanks very much for any help.
You need to tell the browser about html height and body height. Then it calculates the height based on those sizes. The following works fine on all bowers.
html { height: 100%; }
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.display {
max-width: 80%;
max-height: 80%;
overflow: hidden;
}
There's a working example here: http://jsfiddle.net/P7wfm/
If you don't want image to crop if they exceed the 80% height or width set img height to
.display img {
min-height: 100%;
min-width: 100%;
}
I agree with #Uds, you will need to specify the height and width of the body and html element
Other thing to keep in mind:
Moreover you will also need to define the browser in CSS code, you can define it by follow:
.display{
/* For general browser */
max-width: 80%;
max-height: 80%;
/* For Firefox browser */
-moz-width: 80%;
-moz-height:80%;
/* For Chrome and Safari browser */
-webkit-width: 80%;
-webkit-height:80%;
/* For Opera browser */
-o-width: 80%;
-o-height:80%;
}
This will specify that which browser should have what kind of height or width.
You need to set height for container element or to body:
body {
height:100%;
min-height:100%;
}
Tried the proposed solutions without success, on Firefox 62.0, max-height animation is ignored.
There is also a delay when the max-height property is changed matching the duration of the animation.
I had the same problem today but with the nice twist that I could not set all parental elements to a height of 100%.
I found a clue to another solution to this problem here:
https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
You can assign not only % to max-height, but also "em", so if you set your html and body to a font-size of 100% this works similiar to a percental width.
<div>
<p>
<img src="" alt="">
</p>
</div>
html,body{
font-size: 100%;
}
img{
max-width: 100%;
max-height: 50em;
}
DEMO
Changing max-heigth to 80vh worked for me.