Scroll up

[jgluhov]

How to turn off scroll up ???

[dhilt]

This issue could be solved through some special directive placed on ui-scroll viewport element.

    <ul ui-scroll-viewport scroll-up-prevent>
        <li ui-scroll="item in datasource">{{item}}</li>
    </ul>

app.directive("scrollUpPrevent", function ($window) {
    return function(scope, element, attrs) {
        var scrollTop;
        element.bind("scroll", function() {
          if(scrollTop !== undefined && scrollTop > element.scrollTop()) {
            element.scrollTop(scrollTop);
          }
          scrollTop = element.scrollTop();
        });
    };
});

I've created a demo on it: http://jsfiddle.net/dhilt/z11bg2jj/1/ and hope that this is what you needed.

[jgluhov]

thank you bro

[jgluhov]

​Динис только мне нужно не вообще запретить наверх подниматься а что бы
после первого элемента лента не поднималась ​дальше scroll up

On Thu, Dec 3, 2015 at 4:28 PM, Denis Alexanov [email protected]
wrote:

This issue could be solved through some special directive placed on
ui-scroll viewport element.

<ul ui-scroll-viewport scroll-up-prevent>
    <li ui-scroll="item in datasource">{{item}}</li>
</ul>

app.directive("scrollUpPrevent", function ($window) {
return function(scope, element, attrs) {
var init, temp;
element.bind("scroll", function() {
if(init === undefined) {
init = element.scrollTop()
}
else if(init > element.scrollTop()) {
temp = element.scrollTop();
element.scrollTop(init);
init = element.scrollTop();
}
init = element.scrollTop();
});
};
});

I've created a demo on it: http://jsfiddle.net/dhilt/z11bg2jj/ and hope
that this is what you needed.

—
Reply to this email directly or view it on GitHub
#38 (comment)
.

[Mastanka]

@dhilt Hi and thanks for this directive, I love it!

I'm trying to implement upscrolling (like in chat for instance). Where you start at index 0 or 1(bottom) and then you go up to index -1, -2, -3, .... ,-123, eof.

However upscroll freezes/lags at some point and I can go to upper indexes only when I scroll faster.

I've created plunker that demonstrates the problem:
http://plnkr.co/edit/KVeNAS5a0dluasyOd1NN?p=preview

I'm not shure if problem is on my side, or someone else experiencing same thing. Or if it's related to issue #36 . I'm not good at cofeescript but I think that my implementation of datasource is same as yours in demos.

[dhilt]

@jgluhov In that case I'd like to say that this is Server side issue, and all you need is just to determine proper bof. On Client side this also can be done via datasource implementation:

datasource.get = function(index, count, success) {
  var result = [];
  var actualIndex = index + offset;
  var start = Math.max(0, actualIndex); // 0 is bof
  var end = Math.min(actualIndex + count - 1, 999);
  if (start <= end) {
    for (var i = start; i <= end; i++) {
      result.push("item " + i);
    }
  }
  return success(result);
};

And this example demonstrates such datasource bof playing (with min index = -40).

[jgluhov]

Thank you bro
On Thu, 3 Dec 2015 at 19:55, Denis Alexanov [email protected]
wrote:

@jgluhov https://github.com/jgluhov In that case I'd like to say that
this is Server side issue, and all you need is just to determine proper
bof. On Client side this also can be done via datasource implementation:

datasource.get = function(index, count, success) {
var result = [];
var actualIndex = index + offset;
var start = Math.max(0, actualIndex); // 0 is bof
var end = Math.min(actualIndex + count - 1, 999);
if (start <= end) {
for (var i = start; i <= end; i++) {
result.push("item " + i);
}
}
return success(result);
};

And this example
http://rawgit.com/angular-ui/ui-scroll/master/demo/examples/persistentScroll.html
demonstrates such datasource bof playing (with min index = -40).

—
Reply to this email directly or view it on GitHub
#38 (comment)
.

[dhilt]

@Mastanka There are two problems with your demo. I've forked it and fixed: http://plnkr.co/Awcnyud2c2SIYUemLBjN.

• First, row margin markup breaks internal calculation. I've changed it to

<p style="margin: 0; border: 5px solid #1c1e22; border-left: 0; border-right: 0">Index: {{item}}</p>

To make this variant completely identical to your one (I mean view) you should also adjust styles of 1st and last rows to remove very top and very bottom borders.

• Second, eof implementation is not ideal. I've tuned it to

      var start = index + count + initialOffset;
      var end = Math.min(start + count - 1, 0);
      if (start <= end) {
        for (var i = start; i <= end; i++) {
          arr.push(i);
        }
      }

where initialOffset is set to -10 to initiate proper items fetching.

So, please go through http://plnkr.co/Awcnyud2c2SIYUemLBjN and hope it helps.

[Mastanka]

@dhilt Thanks man! It work as expected after you changes :) 👍

[dhilt]

@Mastanka btw, I created (or it's better to say recteated) an issue on your problem with margins: #39.

[ashstr]

Wow I was wondering about it , thank u man