I am building a mobile responsive website.
I noticed that when scrolling the page using an iPhone, the scroll is sticky and not smooth, while on android mobiles it's ok.
What can be the cause of this sticky scroll? I cant even see it on my browser! Please take a look at my code on JSfiddle. The images won't load but you don't need them anyway (you can see their borders). I recommend you to use 320px width to view the page so the icons are all organized.
So there is this line you can add to your body or the main div: -webkit-overflow-scrolling: touch;
Made the trick.
Related
I searched all over but can't find a solution. I have a mobile website using a container div (width and height 100%). I use -webkit-overflow-scrolling: touch; to make the content in div smooth scrolling.
However, normally when you scroll down in an iphone your addressbar will shrink and the controls at the bottom totally disappear. Because of the container div having the same size as the body the phone does not detect scrolling in the body. And therefor it will not optimize screen availability.
Does anyone know a good workaround?
I fiddled with BRIM and other JS solutions but nothing seems to work. Thanks in advance.
I am building a mobile website using Mobile Angular UI. After almost completion I tried to finally test it on my mobile devices. I realized that: when I scroll down the page, the navigation bar of the browser(i.e. Safari on iPhone, Chrome on Android devices) does not auto hide like it used to function when browsing normal websites.
Such as these website:
Mobile Angular UI Demo (My project's index.html is almost identical to this index.html)
wReader
Is there fix? Or is just a disadvantage of ng-view and I am going to have to deal with it?
Any outputs are greatly appreciated. Thanks in advance.
This cannot be solved, unfortunately, unless you want to use a different theme or make your own.
This is caused by the CSS. By default, scrolling in Mobile Safari doesn't feel native—the page scrolls more slowly compared to native apps.
In order to get smoother, bouncy, native-feeling iOS scrolling, a parent element (either a div or body) with a height of 100% of the window height is used and it has an overflow-y: scroll property.
Also, some of your theme's features (like the slide-out nav) may require this CSS implementation to work properly.
When scrolling, you are scrolling inside of that element—you are not scrolling the page. Mobile Safari will shrink the address bar when the page scrolls but when this CSS is added, it is detecting that the page does not need to scroll (because the parent element of all of the elements is 100% the height of the window and does not exceed that). This means that the page isn't scrolling and instead a child element on the page has content that is scrolling), Mobile Safari does not detect page scrolling. This cannot be changed. I have a similar implementation on my website.
I made a CodePen that shows how this effect is made. Due to the body (grey) not needing to scroll—because it is 500px tall which is less than the window height—the scrolling happens in one of the elements that allows scrolling. Mobile Safari doesn't know that you want this parent element to act like the whole page so unfortunately this can't be fixed. In the above pen, the blue element is the parent element that simulates the whole page. The child elements are just there to add height/scrollable content.
I'm trying to find a way to get rid of the bouncy scrolling behaviour on mobile devices (e.g. when there is no content below to scroll yet you are still able to do it and scroll content to top and when released it bounces back)
My html structure looks like this
<html>
<body>
<div id="wrapper">
<div id="container">
where all elements stretch to full height of the window. I tried overflow hidden on html and body, auto etc.. yet nothing seems to achieve a state where if you scroll than it doesn't scroll unless there is more content below.
It sounds like what you're looking for is to disable the scroll bounce for a UIWebView in iOS. If you're developing a native iOS app, you can disable the bounce by setting [WebViewObject].bounces = NO where [WebViewObject] is the UIWebView.
If you're just looking to prevent the bounce in the Safari mobile browser, I don't believe there's a way to do this.
Is it possible to show the scroll bar in dojox mobile when the page is viewed from desktop browser?
This is my scrollablePane in which i want to show the scrollbar
<div id="resultViewScrollPane" data-dojo-type="dojox/mobile/ScrollablePane">
<div id="resultViewContentPane" data-dojo-type="dojox/mobile/ContentPane"></div>
</div>
To show the desktop browser scrollbar, you can override the overflow: hidden statement in dojox/mobile/themes/*/ScrollablePane.css in your own stylesheet:
.mblScrollablePane {
overflow: auto !important;
}
However, I don't think this is what you're looking for, as the client scrollbar seems to be pretty confused, because ScrollablePane is using webkit transforms to emulate scrolling in an inner div (see comments near top of dojox/mobile/scrollable.js). Try the above to see what I mean.
If you're just looking to keep dojox/mobile's custom scrollbar visible, you can override hideScrollBar() in scrollable.js, though it won't act like a normal desktop scrollbar (can't click and drag it, etc). I'd suggest not using a dojox/mobile ScrollablePane when the page is viewed on a desktop, and inserting a different widget such as a regular ContentPane.
I am trying to design a new website for myself but coming across some big problems when trying to make it compatible with smaller devices.
When running the website at larger resolutions and everything looks fine, until you start to drop it down to mobile and some tablet sizes. When the window becomes smaller, I lose content at the bottom of my website, the scroll bar does not go any further. I can kind of fix this but then I get a horrific horizontal scroll bar that is filled with no content.
See image: http://i.stack.imgur.com/98ZzF.png
I have tried using all the overflow methods but still cannot find a fix.
Link to website so you can view for yourself: Website
overflow-x should fix your issue.
body{
overflow-x:hidden;
}