Skip to content

silentScroll does not work when touchOverflowEnabled is true? #3374

Closed
wamrewam opened this Issue Jan 3, 2012 · 10 comments

4 participants

@wamrewam
wamrewam commented Jan 3, 2012

Hi guys,

When you have a true fixed header bar (touchOverflowEnabled = true), scroll down in the main div and call silentScroll to scroll up, it does not work (it seems it tries to scroll the whole page, not the main div). Is it normal behavior?

Thanks!
PJ

@toddparker

That could be a bug. Mind posting a test page illustrating the issue?

@wamrewam
wamrewam commented Jan 4, 2012

Hi Todd,

Here is a simple example:
http://jsbin.com/ukiyeg/3
There is a "Scroll Up" link at the bottom. It does not work when touchOverflowEnabled is true. It does when it is false.

Thanks!
PJ

@jdconley
jdconley commented Jan 5, 2012

I'm having the same issue here. After investigating a bit it seems window.scrollTo and html/body scrollTop do not work when touchOverflowEnabled is true.

@jdconley
jdconley commented Jan 5, 2012

Just looked into this further. It seems this has to do with the overflow:auto being placed on the content div. To workaround I am now using scrollTop on the content rather than using the global silentScroll when touchOverflow is available.

@wamrewam
wamrewam commented Jan 5, 2012

The link should read
http://jsbin.com/ukiyeg/8
sorry for this.

JD, I tried your workaround but I could not get it to work. On what exactly do you apply scrollTop?

Thanks!

@jdconley
jdconley commented Jan 5, 2012

The thing you want to scroll is the div[data-role="content"] for the page. Since jQM tosses overflow:auto on there, the window is never actually scrolled, it's just that div, and silentScroll only scrolls the window (currently). I cloned your sample and added a link that works: http://jsbin.com/ozeyum/3

In my app I did a monkey patch on silentScroll that looks something like: if ($.support.touchScroll) mycontent.scrollTop(y) else $.mobile._originalSilentScroll(y)

You could also clone the 'silencing' aspects of silentScroll if you need them. It looks like a pretty simple method.

@ResidualEnvy

I can reproduce this as well. Here is how I handled it. obPos is just being passed in as I use it for different elements, you can set it to numeric values 0, 100 etc..

                        if($.support.touchOverflow)
                            $('div[data-role="content"]').animate({scrollTop: obPos}, 1000);
                        else
                            $.mobile.silentScroll(obPos);
@toddparker

Since we're deprecating touchOverflow at 1.1, we're not going to continue fixes for this feature.

@toddparker toddparker closed this Feb 2, 2012
@jdconley
jdconley commented Feb 3, 2012

We really like the truly fixed toolbars without any fading/flashing. Is there going to be an alternative at 1.1?

@toddparker

@jdconley - I understand. The persistent fixed toolbars are going to be pretty close to that. They stay outside the transition and appear fixed across pages. We're still working on this feature so this is buggy right now, esp. if you scroll down and tab across. We're hoping to mitigate that as we approach 1.1:
http://jquerymobile.com/test/docs/toolbars/footer-persist-a.html

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.