itsdrewmiller / angular-perfect-scrollbar

This is a small directive to allow the use of perfect-scrollbar (https://github.com/noraesae/perfect-scrollbar) in angular

Hi there 👋

angular-perfect-scrollbar's Issues

In Safari 9.1.1 OSX El Capitan doesn't work

For some reason in Safari 9.1.1 OSX El Capitan doesn't work, Any idea why?

white-space: pre-line;

The css line "white-space: pre-line;" messes up my entire design for my scrollable area, the height of my li seems to double and I also notice a double border.

Force scroll to bottom?

Wondering how I might have container scroll to show most-recently added item. Have:
<perfect-scrollbar id="scrollStudents" style="max-height:130px; overflow-y:hidden;position:relative;" suppress-scroll-x="true" refresh-on-change="selectedStudents" refresh-on-resize="true">

Ideas anyone?

Replaces ul with div

Element

is replaced with a div, which is incorrect and breaks html.
Whilst it is understandable why this is happening because of the transclusion, it is not mentioned that you shouldn't put this on a ul element

ENORESTARGET No tag found that was able to satisfy ~0.4.11

Hi,

I used this component before and it run normally. However, I've just encountered this error since this version doesn't exist anymore. I received followings suggestion:

Additional error details:
Available versions: 0.6.1, 0.6.0, 0.5.9, 0.5.8, 0.5.7, 0.5.6, 0.5.5, 0.5.4, 0.5.3, 0.5.2, 0.5.1, 0.4.9, 0.4.8, 0.4.7, 0.4.6, 0.4.5, 0.4.4, 0.4.3, 0.4.2, 0.4.1, 0.3.4, 0.3.3, 0.3.2, 0.3.1, 0.2.5, 0.2.4, 0.2.3, 0.2.2, 0.2.1

I think you need to modify the bower.json with new version of perfect-scollbar

mouse scrolling on the regular dropdown inside psb is not possible

<div perfect-scrollbar
       wheel-propagation="false"
       swipe-propagation="false"
       suppress-scroll-x="true"
       style="height:500px;overflow-y: hidden">
    <div style="height: 600px; background: red;">
      <div style="height: 200px; width:200px;border: 1px solid black; overflow-y: scroll">
        <div style="height:300px;width: 100px; border: 1px solid yellow">asdljk</div>
      </div>
    </div>
  </div>

Appears in current IE, FF and Chrome

Thanks for your help!

Not functional in current state

Hey,

I would love to use this library, but this does not seem to be in a working state?
After cloning the repo locally, I am getting an issue with the example

Failed to load resource: net::ERR_FILE_NOT_FOUND (/angular-perfect-scrollbar/bower_components/perfect-scrollbar/min/perfect-scrollbar.with-mousewheel.min.js)
angular.js:10071 TypeError: undefined is not a function
at angular-perfect-scrollbar.js:26
at k.$eval (angular.js:12701)
at k.$digest (angular.js:12513)
at k.$apply (angular.js:12805)
at angular.js:1447
at Object.d as invoke
at c (angular.js:1445)
at fc (angular.js:1459)
at Xc (angular.js:1368)
at HTMLDocument. (angular.js:22007)
2angular.js:10071 TypeError: undefined is not a function
at angular-perfect-scrollbar.js:47
at k.$eval (angular.js:12701)
at k.$digest (angular.js:12513)
at k.$apply (angular.js:12805)
at angular.js:1447
at Object.d as invoke
at c (angular.js:1445)
at fc (angular.js:1459)
at Xc (angular.js:1368)
at HTMLDocument. (angular.js:22007)

in detail:

  $scope.$evalAsync(function() {
    **$elem.perfectScrollbar(options);**
    var onScrollHandler = $parse($attr.onScroll)

and

      }
      **$elem.perfectScrollbar('update');**
    });

Could it be because of the dependencies versioning?

wheel-speed - very very slow on mobile browser

I used this plug-in on my application. On mobile browser scroll happen very very very slow. Even I tried wheel-speed ="1", wheel-speed="50", wheel-speed="500" nothing works. Any idea?

Scrollbar doesn't appear on first mouse over

Hy

First time when you go with mouse over, the scrollbar is not appearing.

if you start scrolling then will appear and will be ok.

thanks

Bower installation steps wrong

When following the steps to install via bower, I noticed that
<script src="bower_components/perfect-scrollbar/min/perfect-scrollbar.with-mousewheel.min.js"></script>
<script src="bower_components/angular-perfect-scrollbar/src/angular-perfect-scrollbar.js"></script>
are not in the bower_components.

event not work

            <perfect-scrollbar class="scroller" wheel-propagation="true" wheel-speed="1" min-scrollbar-length="20">
            <div class="role-list-item" ng-repeat="role in allRoles" ng-class="{'selected':role.isSelected}">
                <div class="item-title" ng-click="changeRole($index)">{{role.job}}</div>
                <div class="item-after"
                     ng-click="deleteRole($index)">X
                </div>
            </div>
            <div class="role-add-item" ng-show="showAddRole">
                <div class="item-title">
                    <input ng-model="newRoleName" ng-blur="submitAddRole()" ng-change="checkInput()" set-Focus>
                </div>
            </div>
            </perfect-scrollbar>

the ng-blur is not work

can i use it on other tags, eg a div?

In the example you have:

<perfect-scrollbar class="scroller" wheel-propagation="true" wheel-speed="50" refresh-on-change="someArray">
            ...
</perfect-scrollbar>

Can it be made to work with something like this:

<div class="scroller" perfect-scrollbar wheel-propagation="true" wheel-speed="50" refresh-on-change="someArray">
            ...
</div>

Undefined_methodError: error evaluating function `alpha`

I tried to import the css file as .less:
@import (less) '../bower_components/perfect-scrollbar/src/perfect-scrollbar.css';

but it raises an error:

undefined_methodError: error evaluating functionalpha: Object #<Object> has no method 'toHSL' in app/bower_components/perfect-scrollbar/src/perfect-scrollbar.css on line 9, column 13:

which is:
filter: alpha(opacity = 0);

Scrollbars in dropdown not showing initially

Hello,

I'm trying to get scrollbars to appear within a UI Bootstrap dropdown. When the dropdown first opens, scrollbars do not appear. If the window is resized or scrolling occurs within the dropdown area, the scrollbars appear.

It looks like in the jquery plugin, this would be solved with .perfectScrollbar('update'), but that does not seem to work when added in the dropdown toggle event. Any suggestions would be greatly appreciated. Thanks!

Doesn't work when showing a div with ng-show

this example doesn't work as expected:
http://pastebin.com/N4zi40Dn
If I click show button, the window is shown without scrolls and I have to scroll manually to trigger refresh

nested scrollbars

Nested scrollbars cant work with this directive, child scrollbar bubbling mouse wheel event to the parent scrollbar. This behavior isn't happening with the original jQuery plugin, I could not find why.

Scroll only is displayed on scroll

In library example the scroll is showed on hover or mouseenter, but in my app only is showed when scroll up or down over the div with scroll.

How I can resolve this issue?

Drop jQuery dependency

Currently, your directive relies on jQuery. But the perfect-scrollbar code doesn't need it: your directive could work the same with vanilla JS. It would fix #55 at least.

I had to give up on using this directive because I have no jQuery available in my app. I ended up rolling my own perfect-scrollbar integration, but I still want to use your code.

PR #47 does the job, you can see how the main script was modified: https://github.com/CareerCruising/angular-perfect-scrollbar/blob/e27ef2b9fa485dce55b591bfefad8e5260f88460/src/angular-perfect-scrollbar.js

Need to support dynamic height scroll area

When I update dynamic content via ajax. I have to wheel the mouse to update the scrollbar sizes.

I think this should not be. We need a way to $watch the scrolLheight to update the scrollbar state.

I found this one https://github.com/cherihung/angular-perfect-scrollbar/commit/06069ff642dc774658412bef4a6c7f885dfe35b0 But please review before merge or explain him why it's not good.

i love you

This directive rocks!
❤️

wheel-propagation="true" only works on an up scroll

wheel-propagation="true" seems to only work when scrolling up and not when scrolling down.

`ps-container` doesn't get correctly added to the container.

If I do .perfectScrollbar() on my container element perfect-scrollbar works fine. If I swap the element with perfect-scrollbar it doesn't work correctly. I've tracked it down to the fact that the ps-container class doesn't get added to the container.

If I use the Angular directive and manually add the class to the element it works as it should.

Bower package registry changes

Hi @itsdrewmiller & @nudge.

Today, without any code changes to our app, bower install started failing with the following:

› bower install
bower not-cached    git://github.com/itsdrewmiller/angular-perfect-scrollbar.git#~0.1.3
bower resolve       git://github.com/itsdrewmiller/angular-perfect-scrollbar.git#~0.1.3
bower ENORESTARGET  No tag found that was able to satisfy ~0.1.3

Additional error details:
No versions found in git://github.com/itsdrewmiller/angular-perfect-scrollbar.git

My suspicion is that sometime within the last ~12 hours, the bower registry for angular-perfect-scrollbar has changed from [email protected]:nudge/angular-perfect-scrollbar.git to [email protected]:itsdrewmiller/angular-perfect-scrollbar.git as prior to today, bower was installing from that fork.

Can you please confirm if my theory is correct, and advise which repo will be the bower registry for angular-perfect-scrollbar going forward?

Thanks!

reset scrollbar

Is there anyway to reset the scrollbar?

Scroll container resize causes scroll position to jump

I'm using this scrollbar directive on a container with a list of clickable elements. Clicking an item can occasionally cause the container to resize (basically it resizes to fit with whatever other elements appear on screen when the user clicks, so gets taller or shorter).

When the element is clicked, if it triggers a resize of the container then the scroll position within the container suddenly jumps up, so the list is in a different position on the page.

Ideally what I want is for the scroll position of the element to stay the same (in other words, after the container resizes, the mouse cursor should remain over the element that was clicked). Unless this behaviour would result in the element being off the bottom of the screen, in which case it should just scroll to the bottom.

Is this at all possible?

$digest already in progress error

The call stack is:
angular-perfect-scrollbar.js:58:32

$elem.bind('mouseenter', update('mouseenter'));

angular-perfect-scrollbar.js:52:18

if(!$scope.$$phase) {
     $scope.$apply();
 }

I'm using angular 1.3.8
Thanks

How to set "top" value of ps-scrollbar-y before initialize?

Hello.
I want to save and restore "top" value of ps-scrollbar-y.
How to set "top" value of ps-scrollbar-y before initialize?

scrollWidth and scrollLeft are not defined - this is useful for horizontal scrollbars

Opened a PR to fix this issue here: #76

I think this is code mistake

Line at the src

$elem.bind('mouseenter', update('mouseenter'));

Please guys, Can you tell me how this line works?

I think it works as unexpected because of:

1. The update function returns undefined
2. It invokes only the first time when the file.js get parsed
3. It doesn't invoke every time the mouse enter the element

It should be

$elem.bind('mouseenter', function() {
  update('mouseenter');
});

Or the update function should return another function.

Thanks for reading!

Bower version for Perfect-Scrollbar

Seems the perfect-scrollbar library has removed version 0.4.11 that this library depends on from their bower register.

Any chance of an update for this library to support more recent versions of perfect scrollbar?

Browserify compatability

Add a main entry to your package.json file

Perfect Scrollbar 100%

Im using ng-repeat and it only works when I give a height in pixels, but if I set the height 100% the scrollbar wont appear. Are there any fixes for this problem or what should I do :(. I know the normal(js perfect scrollbar) does work with %.

My css.
.scroller {
height: 100%;
overflow-y: hidden;
position: relative;
}

Doesn't work with angular.js 1.3.*

How to reproduce the issue:

1. git clone
2. open loremipsum.html and change reference to https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js

result: error Argument 'ScrollCtrl' is not a function, got undefined

Tag releases

Please, using this with bower would be way easier with tagged releases. Just tag the most recent one and keep it updated in the future.

https://github.com/itsdrewmiller/angular-perfect-scrollbar/releases

Thanks a lot!

Is this project dead?

I do not see any activity past the Jan, 2015. There seems to be a plethora of PRs pending merges. If @itsdrewmiller is not interested in maintaining this repo, it'd be best to ask for anyone who'd want to maintain (or atleast co-maintain) this project.

Always Visible y-axis

Hi, I want scrollbars to be visible always. Please help me how to do this?

suppressScroll

How do you apply suppressScrollY and suppressScrollX?
I try this

 <perfect-scrollbar 
                  class="scroller " 
                  wheel-propagation="true" 
                  wheel-speed="10" 
                  min-scrollbar-length="20" suppressScrollY >
...
</perfect-scrollbar >

but no work

[sorry, my english is very bad]

Missing a 'load' event

I need to run some initialization scripts on my elements that are contained in the scrollbar (e.g. jQuery UI datepicker initialization, etc.).
They cannot be found by the browser prior to perfect-scrollbar finishing his initialization.
Currently I have to have a setTimeout loop to overcome this.
Am I missing something?
Anyone else ran into this issue?

Thanks a lot,
Nir

no thumb(slider) element inside of angularstrap popover/tooltip dynamic template

Hello,
I encountered a bug when using the angular strap popover/tooltip with a template url instead of static template.
here are what is needed to reproduce with angular strap:
create a directive that loads an element with bs-popover/bs-tooltip.
give the bs-popover/bs-tooltip a url for the template to use.
the template is using perfect scroll bar directive that transclude repeater which data is being pulled from server.
the ps jquery plugin is being executed before the perfect scroll and it's content being added to the DOM.

This scenario leads to a scroll bar without the thumb(slider) element / or with height of 0;

I created a pull request that adds a evalAsync to the execution of the ps jquery plugin. It solved this issue in my case.

Thanks,
Eran

scroller class is causing the inner div to be hidden

When i have the scroller class attached to the perfect scrollbar it his the inner div.

Support perfect-scrollbar ~6.0

Test with this new version of the plugin and update the bower support

$elem.perfectScrollbar is not a function

Seems that something goes wrong with the initialization of jquery plugin

No tag found that was able to satisfy ~0.4.11

Hi Drew Miller,

Seems that the perfect-scrollbar#~0.4.11 does not exist anymore. Instead there are another available versions and probably you have to change your bower.json

 "dependencies": {
    "perfect-scrollbar": "~0.4.11",
    "angular": "*"
  },

https://github.com/itsdrewmiller/angular-perfect-scrollbar/blob/master/bower.json#L12

while installing I got the following error:

bower angular-perfect-scrollbar#0.0.3           cached git://github.com/itsdrewmiller/angular-perfect-scrollbar.git#0.0.3
bower angular-perfect-scrollbar#0.0.3         validate 0.0.3 against git://github.com/itsdrewmiller/angular-perfect-scrollbar.git#0.0.3
bower perfect-scrollbar#~0.4.11             not-cached git://github.com/noraesae/perfect-scrollbar-bower.git#~0.4.11
bower perfect-scrollbar#~0.4.11                resolve git://github.com/noraesae/perfect-scrollbar-bower.git#~0.4.11
bower perfect-scrollbar#~0.4.11           ENORESTARGET No tag found that was able to satisfy ~0.4.11

Additional error details:
Available versions: 0.5.9, 0.5.8, 0.5.7, 0.5.6, 0.5.5, 0.5.4, 0.5.3, 0.5.2, 0.5.1, 0.4.9, 0.4.8, 0.4.7, 0.4.6, 0.4.5, 0.4.4, 0.4.3, 0.4.2, 0.4.1, 0.3.4, 0.3.3, 0.3.2, 0.3.1, 0.2.5, 0.2.4, 0.2.3, 0.2.2, 0.2.1

Unknown provider

angular.js:13920 Error: [$injector:unpr] Unknown provider: perfect_scrollbarProvider <-

Installation via bower crashes

I've tried to install via "bower install angular-perfect-scrollbar --save" and it displays this:

bower angular-perfect-scrollbar#*           cached git://github.com/itsdrewmiller/angular-perfect-scrollbar.git#0.0.3
bower angular-perfect-scrollbar#*         validate 0.0.3 against git://github.com/itsdrewmiller/angular-perfect-scrollbar.git#*
bower perfect-scrollbar#~0.4.11         not-cached git://github.com/noraesae/perfect-scrollbar-bower.git#~0.4.11
bower perfect-scrollbar#~0.4.11            resolve git://github.com/noraesae/perfect-scrollbar-bower.git#~0.4.11
bower perfect-scrollbar#~0.4.11       ENORESTARGET No tag found that was able to satisfy ~0.4.11

Additional error details:
Available versions: 0.6.1, 0.6.0, 0.5.9, 0.5.8, 0.5.7, 0.5.6, 0.5.5, 0.5.4, 0.5.3, 0.5.2, 0.5.1, 0.4.9, 0.4.8, 0.4.7, 0.4.6, 0.4.5, 0.4.4, 0.4.3, 0.4.2, 0.4.1, 0.3.4, 0.3.3, 0.3.2, 0.3.1, 0.2.5, 0.2.4, 0.2.3, 0.2.2, 0.2.1

"bower install angular-perfect-scrollbar#0.6.1 --save" crashes in a similar way.

last commit broke my tests

last commit added $scope.$apply to the code.

Tests that have a template with this component broke, claiming "digest already in progress".

I have to revert to previous versions.

Problem using perfect scrollbar with material design

When using angular-perfect-scrollbar with md-card, md-card loses all its styling.

Pull Requests

Hey,

Just wondering if you plan on pulling in some of the 20 outstanding pull requests as they would fix a lot of the currently open issues?

License?

Good Morning,

What is the license on this directive?

Uncaught TypeError: Cannot read property 'css' of null

My application is a single page angular app using the angular-perfect-scrollbar. when the app is in mobile mode(app running on mobile emulator) i get this error "Uncaught TypeError: Cannot read property 'css' of null". The error is repeated many times as if its in infinite loop until i refresh the page.

The following code is used in many places of the application.
<div perfect-scrollbar id="scrollid" class="scroller" include-padding="true" always-visible-y="true" refresh-on-change="myArray" style="height: 350px" min-scrollbar-length="25">

No error when the app is in desktop mode.

Is there a solution for this issue?