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.
Related
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 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.
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.
In my Blackberry Webworks app (for Smartphones OS 6, 7, 7.1), i have some code like this:
<div style="width:100%; height:100%; overflow:hidden;">
<div style="overflow:auto;height:100px;width:100%;">
<ul>
<li>Some</li>
<li>Items</li>
<li>that</li>
<li>needs</li>
<li>the</li>
<li>div</li>
<li>to</li>
<li>be</li>
<li>scrolled</li>
</ul>
</div>
</div>
When trying to scroll the div with a touch gesture i always have to touch the div element once first (like a click) before the scrolling gesture works. So i have to touch it then scroll it, and if i want to scroll again (even if nothing else was touched in between) i have to touch it again and then i can scroll again.
In other words: The touch gesture works every second time i try it (if i dont touch anything else in between).
This behavior is really weird and decreases the usability.
Do you have any idea on how i could change this behavior?
I tried to listen to the touch events (touchstart and touchmove) and scroll the div myself and that works in some way, but you dont have that native scrolling behaviour where it continues scrolling if your gesture was really fast and it also influences the click events somehow (i'm not sure why), but they dont work as good as before.
Try removing the outer container div and change the overflow:auto to overflow:hidden.
I published this page to see how different scrolling behavior can be added to a WebWorks application. It maybe of help to you:
http://blackberry.github.com/WebWorks-Samples/kitchenSink/html/css3/overflow.html
I know for a fact you need to specify a fixed height when using CSS in a WebWorks container. height:100% does not behave as you expect it to (the BrowserField does not auto-expand to be 100% of the screen, but it will expand to be 200px for example).
I have a container on a page, which has has a huge overflow-x. On a iPad, the user can simple swipe-scroll left, just like they would do vertically when scrolling down the page.
On a PC, scrollbars are visible so the user can scroll left and right.
However, on the Android, no scroll bars appear and I can't swipe left like I can on the iPad.
Is some special CSS and JS needed here? Does anyone know why this happens?
The overflow property is not working properly in Android devices before Android 3.0. But it is solved from the Android 3.0 or later.
I also had this issue while I was developing an application.
This issue was solved by using a button and animating the element's margin-top property so that it is changed to negative value, therefore creating a scroll effect.