Use slimscroll in combination with ui router

snoepkast commented 9 years ago

How do I use this directive and slimscroll in combination with ui router?

As it stands now when I go to a different state using an ui-sref inside a slimsrolled div the page is blocked from scrolling entirely in the new state.

Version info:

Angular:                   1.3.15
ui-router:                 0.2.13
jQuery:                    1.11.2
slimscroll:                1.3.2
angular-slimscroll:        latest

template (simplified):

<div class="scroll-body" slimscroll="{height: 250}">
    <a ui-sref="base.cases.detail({ id: mycase.id })">{{ mycase.id }}</a>
</div>

ziscloud commented 9 years ago

@snoepkast could you tell me where is the ui-view attribute?

snoepkast commented 9 years ago

Yeah sure, the html in simplified form is something like this:

<html>
    <body>
        <div class="page-container">
            <div class="page-content-wrapper">
                <div class="page-content">
                    <div ncy-breadcrumb></div>
                    <div ui-view></div>
                </div>
            </div>
        </div>
    </body>
</html>

The template of my first post is then used in the ui-view.

I also noticed that it only happens if there is enough content in the div to activate slimscroll, so less then 250 height will not break anything. And when navigated back to the previous page (where slimscroll was activated) the page is also blocked and only the slimscrollable div can scroll. Only a page refresh fixes it.

ziscloud commented 9 years ago

Suggestion A: try to set allowPageScroll to the slimsrcoll option - Checks if mouse wheel should scroll page when bar reaches top or bottom of the container. When set to true is scrolls the page.Default: false

Suggestion B: I have a simple to try to reproduce your issue, but I can not get the "blocked", please check it via this URL: http://embed.plnkr.co/XWr1yNs3YfqwjljWd18J/preview

I resize the windows size to get page scroll bar, but the page is not blocked while I still can scroll the div.

snoepkast commented 9 years ago

Thanks for taking the time to look at this and create an example that makes it a lot easier to show.

I've forked your plunker to extend it and let it show the problem, you can find it here: http://embed.plnkr.co/47aE8q/preview

To reproduce the problem: 1 - click on the paragraph button and check the page is scrolling like normal 2 - click list and check the list and page are scrolling like expected (the list is slimscroll) 3 - click one of the links in the list, which will take you to the paragraph page 4 - check if you can scroll (I can't) 5 - click on the list and check if you can scroll through the page and list (I can only scroll through the list at this point)

The browser I am using is Chrome (41.0.2272.104), but the problem also occurs in Firefox (36.0.4).

ziscloud commented 9 years ago

@snoepkast I found the issue, it is a bug of this directive, we need to call $($elem).slimScroll({ destroy: true }) to destroy the slimscroll, actually, this invocation unbind the scroll event listener which registered by slimscroll.

snoepkast commented 9 years ago

Hmm I just tried it and it doesn't seem to work for me, which version of slimscroll are you using?

ziscloud commented 9 years ago

Sorry, I tested it while I am debugging with firebug in the Firefox, it works, but without the debug and breakpoint, it doesn't work.

Finally, I found the root cause, it is a issue of slimscroll, it register the scroll event handler to the browser Window object while initializing the DOM element, but it should register to the DOM element.

I will raise the merge request to slimscroll (#198), and before it being merged, you could use your own version of slimscroll.

snoepkast commented 9 years ago

Thank you very much! Let's hope your PR gets accepted soon :)

ziscloud / angular-slimscroll

Use slimscroll in combination with ui router #13