Framework7: One Page scroll effect

[iamafake]

Hello,
thx for your useful framework. But I have a problem:
When I have only one page the user can overscroll (grey bg).
I used a jquery code to prevent. It works great but I miss this bounce effect on a single page. How can I activate this? thx and sry for my bad english 😁

[nolimits4web]

Hey there. You can try to add this css rules to your css file:

.pages {
   overflow: 'auto';
   -webkit-overflow-scrolling: touch;
}
.page-content {
   margin-bottom:1px;
}

[iamafake]

Thanks for your quick answer. My problem is that the content between navbar and tabbar is fixed when the content is smaller than the device size. When the user tries to scroll he sees the grey background. With this code:
$('body').on('touchmove', function (e) {
if (!$('.scrollable').has($(e.target)).length) e.preventDefault();
});
... I prevented this but the content is fixed and hasnt this bounce effect

[nolimits4web]

That is right. This CSS fix should do its job. Try to add it and remove your touchmove listener

[iamafake]

:-( doesn't work but thank you for your help

[nolimits4web]

Work for everyone here http://www.idangero.us/framework7/forum/#!/?margin-bottom
By the way, this fix requires that you content should be wrapped with full page layout: .view > .pages > .page.

[nolimits4web]

Oh, sorry, overflow: 'auto' should be without quotes : overflow:auto

[nolimits4web]

And it is for iOS, don't know about Android

[iamafake]

Yes I tested on both but doesnt work. But I dont want to interrupt you . Thx

[nolimits4web]

Ok, let me know if you find suitable solution

[iamafake]

Yes I'll do, should I close?

[nolimits4web]

Just for note. Main point of this solution is to make your .page-content at least 1px larger than .page to always keep that bouncing effect which requires for scrollable content

[nolimits4web]

You can see that it works on default Kitchen sink:
Before this css fix:

After this css fix:

[iamafake]

Hey I found the mistake
1.: 'auto' to auto (you already said)
2.: .pages to .page

And all is ok
So right code is:

.page {

overflow: auto;

-webkit-overflow-scrolling: touch;

}

.page-content {

margin-bottom:1px;

}



[scriptPilot]

This works well with current Framework7 version to eliminate the bounce effect:

• 
  
  1. Download https://github.com/lazd/iNoBounce/blob/master/inobounce.min.js
  
  
• 
  
  1. Include script <script type="text/javascript" src="js/inobounce.min.js"></script>
  
  
• 
  
  1. Add css to .views container
  
  

.views {
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.