I have a page with infinite scroll at the bottom and it is working well but the issue is that the app is meant for browsers also. On browsers, the first paginated result taking almost 50% of the page, and hence the infinite scroll is not working unless I resize down the browser and make it scroll down.
How can I fix this issue?
Related
I am prototyping an Epub reader in Flutter. Each chapter is displayed in a WebView and these WebViews are placed inside a PageView. The contents of each WebView is paginated thanks to a multi-column layout: 1 column = 1 visible page.
During a horizontal swipe gesture, the expected behavior is to have the WebView's contents scrolling while possible, and then have the PageView scrolling between pages as soon as the WebView has reached its limit. Note: during 1 swipe gesture, both can happen: WebView scrolling first, then the PageView.
On Android, it's easily handled thanks to overscroll notifications, as in This code.
But in Flutter, the WebViews are not scrollable and we cannot use the OverscrollNotifications (AFAIK). So I have a few working solutions based on injecting JS code inside the WebView to broadcast the scroll position to the Flutter side, but this is very dirty and frustrating, I hate this kind of code...
Does anyone have a good solution? Thanks a lot in advance!
EDIT: I have a new idea based on Javascript. Instead of continuously sending scroll notifications to the Flutter side during scrolling, I will insert transparent pixels at the beginning and end of each "chapter", and send events to Flutter only when these elements become visible/invisible (thanks to the IntersectionObserver API). But such a solution requires injecting stuff into the chapter's HTML, which is not the best solution. Any better idea is still welcome!
I was wondering if there was a way to freeze a certain section of a webview so that when you scroll through the webview that part of the webview still shows instead of hiding. For example, When having facebook in a webview how could it be possible to keep the blue bar with the notifications, messages, and friend request to always stay on the top when scrolling down the webview just like it is done in the facebook app?
If you want a element inside the webview stays pinned on the screen without affected by the scrolling, you may try to apply position:fixed CSS style on that DOM element.
Please note that position:fixed is not supported before iOS5.
And the native scroll bouncing effect of the UIWebView also affects the fixed position DOM element so you may determine if you also need to disable that bouncing effect.
I'm using jqTouch inside a UIWebView of my native iPhone application and many of the pages have very weird "tap-jump" issues.
About 75% of the time that I access a page if I scroll down a bit, and just tap anywhere on the screen, it jumps to the top of the page. If I open that same page in the iPhone Safari browser, it works great every time and no "tap-jump" issue. So it appears to be an issue ONLY within the UIWebView.
I've been spending hours and hours trying different things to figure out why this is happening and I welcome any ideas.
Thanks,
John
It is expected behavior for jQTouch to scrollTo(0,0) on slide left/right navigation. Of course, this will only create a noticeable effect if you tap a link while the page is scrolled (i.e., if the page isn't scrolled, it can't jump).
I don't know why you'd see a difference between UIWebView and Mobile Safari, unless perhaps the UIWebView is shorter than Mobile Safari, which could create the possibility of scrolling in the UIWebView that doesn't exist in Mobile Safari.
My suggestions are:
Make sure you have the latest version of jQTouch (https://github.com/senchalabs/jQTouch)
Make sure you are doing exactly the same testing in UIWebView as you are in Mobile Safari (i.e., if you scroll down prior to tapping in one, do the same in the other).
HTH,
j
I have a web app that wraps the main site content in an Iframe to enable some elements that are persistent across the site (only way to do what I'm after as far as I can tell).
It works fine on most browsers, but there is a scrolling problem on the Iphone: The content displays, but trying to scroll does a drag and drop operation instead.
Is there any way to tell the Iphone browser to use normal scrolling in that specific Iframe?
Example site: http://carlocapocasa.com
Thanks a ton and a half,
Carlo
Use two fingers to scroll up and down.
I also had problems getting an iframe to scroll on iOS devices. My iframe was inside a DIV, which had it's overflow set to hidden.
My solution was to set the overflow of the containing DIV to visible.
I need to use a website with quite a bit of content in my App via UIWebView.
When I scroll the page in Mobile Safari everything scrolls smoothly. Even if I scroll fast - the grey squared background appears but is rendered properly after a few moments (less then 0.5 seconds).
The same page in UIWebView scrolls jerkily if scrolled fast and doesn't show the grey squared background.
I guess Mobile Safari shows the grey squared background first and renders after that while UIWebview stops the scrolling until the part which will be shown is rendered.
How to I tell UIWebView to behave like Mobile Safari?
It is already being drawn on it's own custom tiledLayer. The problem is that it is by default attempting to draw itself on the main thread so it locks up when I can't be drawn. There is a private message you can call
-(void)_setDrawInWebThread:(BOOL)arg1
That will work BUT you will see empty space when you scroll too fast and it can't keep up with the drawing until it has time to catch up. They use:
-(void)_setDrawsCheckededPattern:(BOOL)arg1
in mobile safari to help with this.
Found a better solution. CGTiledLayer.
http://developer.apple.com/mac/library/documentation/GraphicsImaging/Reference/CATiledLayer_class/Introduction/Introduction.html