oblador / angular-scroll

Scrollspy, animated scrollTo and scroll events for angular.js
http://oblador.github.io/angular-scroll/
MIT License
1.48k stars 235 forks source link

How to use this with angular-ui modal? #174

Open poonwu opened 8 years ago

poonwu commented 8 years ago

Is it possible to accomplish this as of current version?

I tried angular.element(modal).scrollTop(0) given that modalis the modal dialog element of $uibModal. However, nothing happens.

kmccullough commented 8 years ago
    var module = angular.module('myScroll', [
        'duScroll'
    ]);

    module.service('scroll', function($document) {
        this.isVisible = function(element) {
            element = $(element)[0];
            var rect = element.getBoundingClientRect();
            return rect.bottom > 0 &&
                rect.right > 0 &&
                rect.left < (window.innerWidth || document.documentElement.clientWidth) &&
                rect.top < (window.innerHeight || document.documentElement.clientHeight);
        };

        this.to = function(element) {
            element = $(element);
            if (!this.isVisible(element)) {
                // Scroll relative to modal
                var rel = element.closest('[role=dialog]').first();
                if (!rel.length) {
                    // Scroll relative to body
                    rel = $document;
                }
                // Scroll to the element
                rel.scrollToElementAnimated(element);
            }
        };
    });

Then when I call scroll.to(element) it will look for the modal parent and scroll relative to it, or fallback to scrolling relative to $document.