Hi,
I just use your angular directive code for scroll bottom in chat box but i realized watch function calling number of times.
According to angular documentation it should be call only two times. so could you tell me why it is calling multiple times?

The problem is that when i click the chat window with your scroll-glue,the chat window will be scrolled down to the bottom,which is not my wish.How to avoid the scroll-glue scrolling to the bottom when i click the chat Window,as i want the chat window to be scrolled to bottom while the new message is coming?thanks

directive not working with chrome in android check here
whiteboard28.azurewebsites.net

enter with any name and metting id

Hello,

I'm having a hard time getting the library to work. I've got the dependency injecting on the highest level/module like such:

angular.module('secureMessagingApp', [ ... 'luegg.directives' ]) ...

, so therefore, every I assume that every nested module and nested DOM element with "scroll-glue" should work.

And in my Jade file I've defined it as such:

#chat.container-fluid(xeditable-focus='',ng-controller='ChatCtrl') .row(scroll-glue="glued") .col-lg-12.padding-top-10

, which evaluates to:

`

I would be interested in taking over maintenance of this module. Please get in touch with me if you're interested.

Hi,
How to add Fade-In animate to scroll down new item? I want to show new item with css animate effect.

Thanks

Firstly, I've just started with Angular so this may be a basic question. But your directive looks like just what I need. I have been playing with this for few hours and I'm stumped so would really appreciate some help.

I have a simple chat app (basically the pusher angular mini version which is at pubnub/angular-js). I haven't altered anything except formatting with bootstrap. Everything but the scroll-glue is working fine. I am trying to scroll to the bottom of the message div with every new message but no dice. Not sure if I'm applying the glue to the correct scope. There is no scope for just "messages" so I applied the glue to scope that contains the messages as that should trigger the glue (or at least I thought it would). I did try it all the scopes and still no dice. Thus my "stumpedness".

The model/scope output in the debugger looks like below:

{ 
userId: User 878
channel: ChatX Channel
messages: 
[ Welcome to ChatX Channel, [User 39] Woot, [User 4] fleh, [User 4] dammit, [User 878] test, [User 878] what? ]
publish: null
glued: true
users: 
[ User 4, User 878 ]
newMessage: 
 } 

. As there no defined scope for the messages alone I set the option in the only scope available that would trigger the directive (in the register function at the bottom):

angular.module('PubNubAngularApp', ["pubnub.angular.service"])
.controller('ChatCtrl', function($rootScope, $scope, $location, PubNub) {
  // make up a user id (you probably already have this)
  $scope.userId   = "User " + Math.round(Math.random() * 1000);
  // make up a channel name
  $scope.channel  = 'ChatX Channel';
  // pre-populate any existing messages (just an AngularJS scope object)
  $scope.messages = ['Welcome to ' + $scope.channel];

  if (!$rootScope.initialized) {
    // Initialize the PubNub service
    PubNub.init({
      subscribe_key: 'demo',
      publish_key: 'demo',
      uuid:$scope.userId
    });
    $rootScope.initialized = true;
  }

  // Subscribe to the Channel
  PubNub.ngSubscribe({ channel: $scope.channel });

  // Create a publish() function in the scope
  $scope.publish = function() {
    PubNub.ngPublish({
      channel: $scope.channel,
      message: "[" + $scope.userId + "] " + $scope.newMessage
    });
    $scope.newMessage = '';
  };

  // Register for message events
  $rootScope.$on(PubNub.ngMsgEv($scope.channel), function(ngEvent, payload) {
    $scope.$apply(function() {
     $scope.glued = true;
      $scope.messages.push(payload.message);
    });
  });

Lastly I'm attaching to the div that contains the repeating messages like below. Im not using two-way binding as I dodn't think I needed it. Maybe I'm wrong here:

...
                    <div id="chat_widget_messages_container">
                        <div id="chat_widget_messages" scroll-glue >
                            <ul>
                                <li ng-repeat="message in messages">{{message}}</li>
                            </ul>
                        </div>
                    </div>
...

And lastly, the style (with overflow-y set) on the scrolling container looks like this:

#chat_widget_messages {
        overflow-x: hidden;
        overflow-y: scroll;
        position: absolute;
        max-height: 300px;
        bottom: 0;
}

Any help would be awesome. Thanks.

Drawing inspiration from google allo and other bots, it would be great if there would be a way to add transition to the scrolling action so that if the scroll position is at the end, it would transition to the new scroll position after an element is appended.

When I use a max-height css animation on a ng-repeat, the scroll-glue only scrolls to the height at the the first point in the animation.

It would be nice if this directive could listen for the animation ending, then fire. Or perhaps fire at beginning and end.

Currently, v2.0.6 is available via bower, but npm only has 2.0.4 as the most recent version. I noticed that the maintainer for the npm package is not you. Was it deliberate or did that guy just register his package before you could?

In any case, keeping both package manager versions of your module would be ideal. If there's any way you can make that happen, you would be my hero! 😄

I face a problem when integrating scroll-glue in my project.

I got this error :

Error: [$injector:unpr] Unknown provider: aProvider <- a <- scrollGlueDirective
http://errors.angularjs.org/1.2.26/$injector/unpr?p0=aProvider%20%3C-%20a%20%3C-%20scrollGlueDirective

I've included 'luegg.directives' in my dependencies.
It's weird because there is no mention of scrollGlueDirective apart in the above error message.

Any help will be appreciated ! Thanks

Could you create the initial tag (ex. 0.0.1) for this repo and add new tags for future releases? It would be very helpful for installing with bower.

Great directive BTW 👍

It looks like on Safari for iOS it's not handling images properly. When a new image appears in a container that's glued to the bottom it only scrolls down a little bit, rather than scrolling down far enough to be able to see the entire image. It doesn't seem to happen on android.

Here's a stripped down version of the code where I'm seeing the problem.

<div scroll-glue="true">
    <div ng-repeat="message in messages" class="message">
        <div>
            <div ng-if="message.type == 'image'" ng-cloak><img ng-src="{{ message.content }}"></div>
        </div>
    </div>
</div>

I also found an issue elsewhere that might be related: matthewwilson/ping#4

I'm searching a way to do what your directive do, but smoothly. Is this possible ?

Latest version on NPM 2.0.7 doesn't have support for Browserify / UMD as master has - could you make a new release?

When I zoom in the browser (Ctrl++), elements that previously worked fine with scroll-glue, will stop scrolling down, because the condition in shouldActivateAutoScroll is no longer met.

Scenario:

1.) Div is set to "scroll-glue"
2.) Add multiple items to list and stays scrolled to bottom
3.) Manually scroll up to top
4.) Add another item

After the item at step 4 is added should the div be scrolled back down to bottom?
Currently is stays at the top.

Would it be possible to avoid digesting on scroll? My app can't handle digesting 100s of times a second.

Hi,

I used angular-scroll-glue as per the plunker but I want to auto scroll when i add new item in the ng-repeat list on click event, It works only with exising items present in the list while applying ng-repeat.

Thanks

when I'm trying to apply it on an item that shows up after a condition is satisfied, it doesn't scroll down to it.

Hi! I am coding a chat application using angular/ionic, although I am still pretty new. I cloned the file you have provided inside my "node_modules" folder using npm command you mentioned. However, when trying to import it in "app.module.ts" file, I get an "ReferenceError: angular is not defined". What can I do to solve this?

If a user scrolls, say, a horizontal block to the middle, scroll glue is suspended (i.e. turned off). How can I programmatically, if I add new horizontal content to the block, re-enable scroll glue?

Hello here. I'm trying to use this directive for my case, and it seems it doesn't work properly.

I have scrollable div, with AJAX messages there. So, I expect, that after message is added, container will scroll down for it. But, it doesn't work.

My inverstigations:

$window.addEventListener('resize', scrollIfGlued, false); doesn't call the callback. Callback is called from scope.$watch(scrollIfGlued); immediately after AJAX query done (it's noticeable from stacktrace), and scroll function is called too early, when el.scrollHeight isn't enought high.

The solution is

scope.$watch(function() {                                   
  $timeout(scrollIfGlued, 0, false);                                  
}); 

I'd commit pull request, but test fails for me, and I can't repair them.

I understand, it sounds like edge case, but it will make directive more robust

For some reason the scroll-glue plugin does not work when the scroll container is hidden at page load and the scrollable content is loaded in with an async request post page render.

let me know if you have any more questions / i can help in any way

http://plnkr.co/edit/df2uoW1Vh1BsSfVka4K5?p=preview

I want it so when the num pad slides down. it scrolls the page so the numpad is entirely visible, however it doesn't seem to work

I do have to use this name, [scroll-glue] or I can change to everything I want?

<style type="text/css">
  [scroll-glue]{
    height: 100px;
    overflow-y: scroll;
    border: 1px solid red;
  }
</style>

Hi,
the npm latest version seems not to be the same as the git master version.
For example, we cannot find the 'force-glue' parameter on the npm version.
Whereas both are 2.1.0 version

Hey I love your directive, just found it through google.

A couple of notes, your bower.json says package name is "angularjs-scroll-glue".
And in the bower database it's "angularjs-scroll-glue-Luegg".

For naming policys sake, could you rename into "angular-scroll-glue".
Angularjs libraries tend to use "angular" prefix.

Also by changing the name you could reclaim your version as the REAL package, I see that a old fork has reclaimed your name. Which is just silly, as you keep your package up-to-date, wishbear aka prettynatty could remove his.

➜  chat git:(master) ✗ bower search scroll-glue
  Search results:

angularjs-scroll-glue git://github.com/wishbear/angularjs-scroll-glue.git
angularjs-scroll-glue-Luegg git://github.com/Luegg/angularjs-scroll-glue.git

Kind regards Aciid ~

This is just a tiny suggestion. (I recently found out about this directive on Stack Overflow.)

I note that you are using a module name of luegg.directives, which might be appropriate if this is a whole library of Luegg's directive. But as this is just a tiny, single function module (a good thing!), maybe a model name of something like scroll-glue might be more appropriate? There are many possible variations.

Thanks for the nice work!

http://plnkr.co/edit/KsUSblFZP6tuVO7UAQMH?p=preview

Please make it work for ng 1.3.x and 1.4.x

Everything else is working fine for me, except once I move the scroll bar in the element scroll-glue is bound to I cant get it to reset back to true by scrolling to the bottom.

function shouldActivateAutoScroll(){
console.log(el.scrollTop + el.clientHeight == el.scrollHeight)
return el.scrollTop + el.clientHeight == el.scrollHeight;
}

This always evaluates to false once I scroll.

i have included your directive in my application but dint work correctly on my explorer and mozila fire fox browsers. it even shows browser default scroller and it becomes 2 scrollers at once.

Hi,

Could you publish this as an npm package too please?

I'm getting some issues trying to use scrollGlue on an element that already makes use of ngModel.

scrollGlue changes my model to true or false, overriding my application data.

Is the real ngModel instance really necessary for this plugin? Always using the fake one solves my issue.

I am trying to import this module in the following way:

1. Added to package.json
2. In app.js I added import luegg from 'angularjs-scroll-glue'
3. And then

export let app = angular.module('mymodule', [
   ...some other modules...
    luegg.directives,
]);

But console throws: Error: [$injector:modulerr] Failed to instantiate module mymodule due to:
[$injector:modulerr] Failed to instantiate module undefined due to:
[ng:areq] Argument 'module' is not a function, got undefined

It seems that it actually wants to load it but fails. Am I doing something wrong and is there any way I can make this work?