javascript - "perfect-scrollbar" (jQuery plugin) isn't initialised properly when a its container is be

admin2025-04-19 0

On my page I programmatically generate a food/drinks menus from a json file with Angular.js. The problem is with the "perfect-scrollbar" used for scrolling the angular-generated content, which appears to require a scroll-wheel event to initialise on these menus. This makes it impossible to scroll on devices without a scroll-wheel. Apart from the angular-generated content other pages initialize perfect-scrollbar properly. This gave me a clue that the problem might lie with the interaction between jQuery world (perfect-scrollbar is a jQuery plugin) and Angular world.
The site is themockingbird.co.uk - navigate to the "Food" and "Drinks" to see the problem in action - can't scroll the content (the perfect-scrollbar won't appear) unless with the mouse scroll-wheel.
I've written this little directive:

mainMenuApp.directive('scrollBar', function(){
    return {
        restrict: 'C',
        template: '<div ng-transclude></div>',
        transclude: true,
        scope: {},
        link: function(scope, element, attrs){
            $(element).perfectScrollbar();
            //element.perfectScrollbar(); - doesn't work
            //angular.element(element).perfectScrollbar(); - doesn't work
        }
    }
});

to facilitate the "perfect-scrollbar" via angular for the two menus, but this did not solve the problem.
How can I make the perfect-scrollbar work perfectly with angular (pun intended :)?
I appreciate your time.
cheers
Jared

mainMenuApp.directive('scrollBar', function(){
    return {
        restrict: 'C',
        template: '<div ng-transclude></div>',
        transclude: true,
        scope: {},
        link: function(scope, element, attrs){
            $(element).perfectScrollbar();
            //element.perfectScrollbar(); - doesn't work
            //angular.element(element).perfectScrollbar(); - doesn't work
        }
    }
});

Share Improve this question edited Apr 15, 2015 at 3:39 EternalHour 8,6816 gold badges39 silver badges58 bronze badges asked Apr 24, 2014 at 20:34 Jared Tomaszewski 8034 gold badges19 silver badges31 bronze badges

I can scroll in Chrome 34 on Mac OSX without a problem using the perfect scroll bar (the scrollbar with the orange arrows I guess). In which browser have you tried it? – Mandy Schoep Commented Apr 24, 2014 at 20:41
It works for me in Chrome & Firefox 28. Worked with both my laptop touchpad & mouse wheel. – EnigmaRM Commented Apr 24, 2014 at 20:51

Add a ment |

3 Answers 3

Sorted by: Reset to default 1

At the time your link function is executed, your menu-food.json and menu-drink.json are not arrived yet and perfectScrollbar needs an update at the time the data arrive, called with:

$(element).perfectScrollbar('update');

Since you have no architecture for handling the food and drinks lists as decoupled watchable values in a controller attached by your directive, you may simply broadcast an event from the root scope, listened by your directive link functions, thus updating the perfectScrollbar instance at the right moment.

I had the same problem when using https://github./itsdrewmiller/angular-perfect-scrollbar - the following "add-on directive", solved this problem:

.directive('psMouseOver', function () {    
    return {       
        link: function(scope, element) {
            element.bind("mouseover", function(e){
                e.stopPropagation();
                e.preventDefault();    
                element.perfectScrollbar('update');
            });   
        }
    }
});

In your case however, one would just add those lines and write your directive as:

mainMenuApp.directive('scrollBar', function(){
    return {
        restrict: 'A',
        template: '<div ng-transclude></div>',
        transclude: true,
        scope: {},
        link: function(scope, element, attrs){
            element.perfectScrollbar();
            element.bind("mouseover", function(e){
                e.stopPropagation();
                e.preventDefault();    
                element.perfectScrollbar('update');
            }); 
        }
    }
});

That happen in my case when Angular.js files loaded before JQuery and Perfect Scrollbar scripts files includes.

<script src="assets/libs/jquery.min.js"></script>
<script src="assets/libs/jquery.mousewheel.js"></script>
<script src="assets/libs/perfect-scrollbar.js"></script>

Try to load firstly JQuery, Perfect Scrollbar, and just after AngularJS.

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745002747a279331.html

最新回复(0)

javascript - &quot;perfect-scrollbar&quot; (jQuery plugin) isn&#39;t initialised properly when a its container is be

3 Answers 3

javascript - "perfect-scrollbar" (jQuery plugin) isn't initialised properly when a its container is be