Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Goes back to top if I reveal the menu #5

Closed
pmtarantino opened this issue Mar 3, 2015 · 10 comments
Closed

Goes back to top if I reveal the menu #5

pmtarantino opened this issue Mar 3, 2015 · 10 comments
Assignees
@pazguille
Labels
improvement

Comments

@pmtarantino
Copy link

When I browse the demo pages, after scrolling, if I open the menu, the pages scroll back to the top, losing my position.

Tested on Chrome on Android 5.
@beyondgrayzone
Copy link

Yes, it scrolls back to the top. I am on Android Chrome 4.4

@miniplus
Copy link

miniplus commented Mar 4, 2015

Same thing goes for Mobile Safari on an iPhone 6 plus

@pazguille
Copy link
Member

Yes, we know this issue. It's happen because we use overflow:hidden; on <html> to prevent scrolling the viewport on mobile.

Any idea?

Thanks!

@pazguille
Copy link
Member

I fix it adding a wrapper element. Then I set the overflow property to hidden on this wrapper instead of <html> to prevent scrolling.

.slideout-open .slideout-panel-container {
  overflow: hidden;
}
<div class="slideout-panel-container">
  <main id="panel class="slideout-panel">
    <header>
      <h2>Panel</h2>
    </header>
  </main>
</div>

@babsonmatt
Copy link

@pazguille
The above fix prevents the scroll to the top, however the contents of the menu is no longer visible (since it's at the top).

pazguille added a commit that referenced this issue Mar 5, 2015
@pazguille
#5 Fix back to top.
49d8a1a
@pazguille
Copy link
Member

@babsonmatt
I think we can fix it with CSS.

I have created a new branch: fix-back-to-top-5. Could you help me to test it on your browsers/devices? Just go to this branch and open the file test/index.html.

Thanks!

@babsonmatt
Copy link

@pazguille works great on chrome dev ( 42.0.2311.15 dev-m (64-bit) ) and firefox 36!

@pazguille pazguille mentioned this issue Mar 6, 2015
Closed
@pazguille pazguille self-assigned this Mar 6, 2015
pazguille added a commit that referenced this issue Mar 7, 2015
@pazguille
#5 A better way to fix back to top.
f3e5caf
@pazguille
Copy link
Member

Hi,

I have found a better way to fix it:

  1. Remove width and height 100% from html.
  2. Add overflow:hidden to .slideout-panel when the slideout is opened.

Could you help me to test it on your devices? Just go to the branch fix-back-to-top-5 and open the file test/index.html.

:)

@pazguille
Copy link
Member

#21

impronunciable added a commit that referenced this issue Mar 10, 2015
@impronunciable
Merge pull request #21 from Mango/fix-back-to-top-5
3214080 
Fix back to top - #5
@pazguille pazguille mentioned this issue Apr 9, 2015
Closed
@impronunciable impronunciable mentioned this issue Jun 11, 2015
Closed
@impronunciable impronunciable mentioned this issue Jun 29, 2015
Closed
@pazguille pazguille mentioned this issue Aug 7, 2015
Closed
@RoIVIan-V
Copy link

Hi,
If i use jQuery library then the panel scrolls to the top. Without jQuery it works fine.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@pazguille pazguille

Labels
improvement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@pazguille @babsonmatt @miniplus @pmtarantino @beyondgrayzone @RoIVIan-V