Max-height for nano scrolls the whole page up

[artem-galas]

I have a container which has max-height 600px. This container has nanoScroller. And if the height of this container changes dynamically (collapsing), then the main page scroll (browser scroll) moves the page to the top. Please help. Thanks in advance.

[artem-galas]

I have created a plunk, here is the link: plunk I am using nanoScrollerDirective . To replicate the issue, scroll down to the page bottom and press "Add item to list". Afterwards you'll see that the browser scroll moved up. Thanks in advance.

[kristerkari]

Hmm... I'm not sure if that happens because of nanoScroller or that directive that wraps it.

[kristerkari]

Or is it something Angular related?

[artem-galas]

Yes, I am using Angular, and it seems the problem is in the directive I am using. Can you please tell me if nanoScroller can be used with max-height? Thanks.

[kristerkari]

There is this old pull request that adds support for using max-height: https://github.com/jamesflorentino/nanoScrollerJS/pull/138

I looked at your Plunker, but it is quite hard tell from it what is actually going on when I click the button and the page jumps. This should really be tested without the Angular directive to see if the problem is in nanoScroller or the directive.

[artem-galas]

Thank you for advice. I have just tested nanoScroller on my project without directive and everything seems to be working fine except for max-height doesn't work and nano-pane doesn't display, probably due to the content being loaded later than nanoScroller JS. And that is why if initially the content had height=100px and if the height of the container changes, max-height is ignored as nanoScroller JS sets its own height. The code looks like this:

<a ng-click='show-me'>Show me</a>
<div class='nano'  ng-show='show-me' style='max-height:600px;'>
  <ol div class='nano-content'>
     <li ng-repeat='post in posts'>
       {{post.title}}  
     </li>
  </ol>
</div>

[kristerkari]

I have just tested nanoScroller on my project without directive and everything seems to be working fine except for max-height doesn't work and nano-pane doesn't display, probably due to the content being loaded later than nanoScroller JS.

If you load content asyncronously and use plain nanoScroller, you should call nanoScroller again after you get your content so that it re-calculates element sizes that it needs to create a scrollbar.

[artem-galas]

Thanks for the advice on max-height. I've just managed to replicate this problem on plain nanoScroller which occurred with directive. After changing size in nano-content I called $('.nano').nanoScroller() and the whole page moved up.

[kristerkari]

@artem-galas Good! Can you post the code to JSFiddle or JSBin so that I can have a look?

[artem-galas]

Hi, @kristerkari ! Here's a plunk in which I use Angular and nanosSroller. You could replicate the error that I've mentioned before: press the button add item, scroll the page down and press the button add item at the bottom, then you'll see that the scroll went up.

[kristerkari]

Yes, so I tried to do the same thing without Angular, and in that case nanoScroller was working correctly.

It looks like something in how Angular renders the page is breaking nanoScroller.

[artem-galas]

Thank you for a prompt reply. Can you please send me your jsfiddle so I can check the code? And I do not think that this is related to the way Angular renders the page as applying of nanoScroller occurs upon clicking Add item button.