| Issue 56: | iscroll select tag issue | |
| 9 people starred this issue and may be notified of changes. | Back to list |
When clicking on a select input that is *towards the bottom* of the scrollable area, and the native iPhone UI appears on the bottom, the content within the wrapper is shifted up. When you close the select options, you can only view the area from the bottom of the content minus the mask height– you can’t scroll up past the bottom-most visible area. I tried calling the refresh() method on the change event of the select input but that doesn’t seem to work.
Apr 19, 2011
#2
hogar...@gmail.com
Apr 19, 2011
can u please tell how to create hidden scrollable area. and _resetPos code.
Apr 21, 2011
The basic structure of the code looks like:
<div id="wrapper">
<div id="scroller">
<!-- all scrolling content here -->
<div>
<div>
The id's don't really matter. You can call them whatever you want as long as you use the same id to initialize your iScroll object. I'm just using these ids to clearly define what I'm explaining. Wrapper is the node that the iscroll is applied to and scroller is a div which holds all the content you want to scroll. Any siblings of scroller will not scroll as only the first child of wrapper will scroll. You can set the height on wrapper to be the height you want the scrollable region to be. Don't limit the height of scroller, as it should be allowed to overflow outside of wrapper. The overflow will be hidden and then shown when you scroll. This overflow of scroller is what I mean by the hidden scrollable area. If there is overflowed content below a select larger than dropdown/popup of select options, even if it is not shown on screen, this problem should not happen. If the list of select options is larger than the remaining overflow, this problem will occur.
For the _resetPos code, I am using the iscroll-lite code to reference line numbers. Take a look at lines 359-362, they should look like:
_resetPos: function (time) {
var that = this,
resetX = that.x,
resetY = that.y;
To disable the scroll limits to see the top of your form, either comment out all the code in the _resetPos function or change like 359 to:
_resetPos: function (time) {
return;
var that = this,
resetX = that.x,
resetY = that.y;
However, this is a workaround. Ideally you should be able to resize the sizes of the elements and move selects to not be at the bottom so you do not have to use this workaround. This workaround is good for testing, but does not fit with a native look-and-feel. I spent a lot of time resizing heights so that wrapper was the size I wanted and all other content was overflowed properly so it scrolled nicely without this workaround. However, I did find this workaround was very useful while I was resizing all the heights.
Apr 23, 2011
Thanks works fine. but that doesn't resets scroll position to its origin when it reaches end. looks the app gone ugly. is there any fix to stop the shifiting up of div when it hits scroll end. and that will only helps fine.
Apr 26, 2011
What steps will reproduce the problem? 1.Create a select box near or at the bottom of the scroll 2.Hit select box - u can see the scroll jumps upward and white screen during select box selection 3.The scroll cannot be able to move back to top due to shift in scroll position. What is the expected output? What do you see instead? Normal scrollable area through top to bottom is expected output and scroll not going to top of div What version of the product are you using? On what operating system? Version 3.6 Ipad 1 Ios Please provide any additional information below. Click the select input "towards the bottom" of the scrollable area,the content within the wrapper is shifted up. When you close the select options, you can only view the area from the bottom of the content minus the mask height– you can’t scroll up past the bottom-most visible area. I tried calling the refresh(),resetPosition() method on the change event of the select input but that doesn’t seem to work.
May 5, 2011
Any luck with this....seeing the same issue...
Jun 30, 2011
Any news about this? Really needs this fixed and can't find a way to get it work in a nice way.
Nov 11, 2011
I ran into the same problem and couldn't find a really satisfying fix for it. Any recent developments on this?
Nov 11, 2011
I ran into the same problem and couldn't find a really satisfying fix for it. Any recent developments on this?
Aug 20, 2012
I have had this problem on the iPad and found that if you set useTransform to false in the iScroll constructor the problem does not seem to appear anymore.
I have:
myScroll = new iScroll('wrapper', {useTransform: false, onBeforeScrollStart: null});
|