When I load local html in WKWebView with <body contenteditable="true"> I need to scroll downwards when selecting range over keyboard.
In order to do that I have added some observers for keyboardWillShowOrHide and keyboardWillShowOrHide to adjust the scrollView.contentInset and scrollView.scrollIndicatorInsets. That works fine and as expected.
The problem now I'm experiencing is flickering and broken scroll while selecting range of text.
The flickering and broken scroll can be fixed by adding to html <body contenteditable="true" style="overflow:hidden;"> But that breaks the initial scroll downwards when selecting range over keyboard.
Any hints/help would be appreciated.
Here is a link to test projects git
Related
I have a button in bottom part of my website. On ios devices in safari browser, when i try to click it, it first opens footer section of browser and then i have to tap again to click the button. How can i click button in one tap?
Refer this GIF: https://i.stack.imgur.com/HyciL.gif
height: 100vh (this will set your content to have maximum possible height)
overflow-y: scroll (this will make that div/element scrollable and hence browser won't notice that you are scrolling when actually you are scrolling.)
Due to ios safari's default behaviour when you scroll on page it automatically hides header and footer of browser. Now if you have a button on bottom part of your website, you will have to tap twice to make it work. The first tap will trigger safari footer section (assuming you wanted to open footer section) and second tap will actually trigger click event on button.
One of main reason of this thing causing an issue is, whenever you scroll, safari notices that you have scrolled and you will keep scrolling. To show you maximum content on website it hides footer and addressbar. and that's why using overflow-y: scroll is mandatory.
P.S.
Because you are now scrolling within the div/element window.addEventListener('scroll', function()) won't work anymore. To fix that, you can use document.getElementById('your-div-id').addEventListener('scroll', function())
Apart from this window.pageYoffset will always be 0. To get pageYOffset, you can use getBoundingRect property of the div on which overflow-y:scroll was added.
For example:scrollPosition = document.getElementById('your-div-id').getBoundingClientRect().top
This will give you height from top of the div till you have scrolled.
Happy debugging
I have a layout with a div.header and a div.body with a form and some inputs inside.
The div.header is position absolute so does the div.body.
Both are at the same level, one below the other, have a height and it is possible to scroll when the content is larger than the height.
<div class="header">HEADER</div>
<div class="body">BODY</div>
So when the div.container has a lot of content, we can scroll the content. And the header will remain unchanged so it looks like stick to the top.
My question is on safari iOS, it seems like when the keyboard is opened after taping on a input, we suddenly can scroll the whole layout. And so the div.header shift up. Is there any way to disabled that ?
On android, only the div.body will be scrollable. And so the header looks sticky.
I have this example:
jsfiddle.net/6mNpp/
Is it possible, to prevent the scrolling of the left menu, when it is open and the whole site is scrolling? I mean, when I open the left menu and scroll the content, then the left menu is scrolling as well. How to make them with independent scrolling?
Thanks
Nik
You can set the panel fixed with CSS. With this, the left panel is not scrolling when the content is scrolling.
The code is the same that the JSFiddle, just add in the style, position:fixed
<div data-role="panel" id="defaultpanel" data-display="push" data-theme="b" style="overflow:auto; position: fixed;" data-animate="false">
Reference: Positioning Panels
More info...
JqueryMobile roadmap http://jquerymobile.com/roadmap/ says independent scolling should arrive in version 1.7
Another possible hack workaround maybe adding the divs via an iframe may offer a clumsy solution.
The default behavior in jquerymobile when I have header, content and footer (where header/footer are fixed) is that when I scroll the content the header/footer show/hide. I mean when you start scrolling the header/footer hides and when u stop scrolling the header/footer are shown again. On devices its looks very bad/none-user friendly. I want to avoid this show/hide effects of header/footer. Is there any thing thats available in jquerymobile or some of its plugin to avoid it? If nothing then I want to apply iScroll on the content. Can someone guide me how to make data-role="content" using full-screen height?
If this is what you are referring to, then you can just remove the data-position: fixed from the headers and footers. I tried it on the iPhone, and it is still buggy (seems to flicker whenever a touch event it generated, even if it is not necessary).
I'm creating a mock-up of a function to be added to a mobile version of a site. The idea is to have a horizontally scrolling footer of links with vertically scrolling content; in effect, recreating the functionality of the native iOS behavior when double-tapping the home button.
Problem: when the page loads, it appears the viewport is not getting recalculated to match the new content area height. This leaves an ugly blank area (apparently the size of the URL bar in iOS Safari) below the scrollable footer.
I've tried adding a timeout to recalculate the height (using the function in scrollview.js). When using a fixed-position footer, the footer behaves strangely but eventually reappears in the expected place - the blank space remains, however.
Link to jsfiddle code.
Link to imgur screenshot from my iPhone.