search

ng2-ui / scrollable

Angular2 Automatic Scroll Detection With Animation
17 stars 10 forks source link

when i click a tab in vertical condition, i suppose the id is s4, then the active is s3 id,how to solve this problem? #3

Closed lzm420241 closed 7 years ago

lzm420241 commented 7 years ago

i set id from s1 to s7, when i click s5, the active id is s4,and the window show the part of s4 and the part of s5, but s4 is the top of s5. So i think the page run Ng2ScrollableDirective.scrollTo() function , then run scroll event ,so the last value of id is s4, right? but i click s5 ,then s5 should be active , then i want to active s5 ,how to solve the problem?

allenhwkim commented 7 years ago

There might be a bug in it. if you click s5, it should scroll 550px, but only scrolls 540px, it result in showing s4 on a box. That's why it shows s4.

I will try to find a reason and solution later.

Thanks for reporting this.

Meanwhile, any help or PR would be appreciated.

lzm420241 commented 7 years ago

@allenhwkim 

  let step = horizontal ?
      Math.ceil((targetOffsetLeft - currentScrollLeft) / 10) :
      Math.ceil((targetOffsetTop - currentScrollTop) / 10);

through the code , for step counting value, we left Math.ceil((targetOffsetTop - currentScrollTop) % 10) that we did not count in step. i think that's why the scroll bar scrolls 540px when you click s5! (the fact that i think scroll value is more than 540px, but less than 550px)

lzm420241 commented 7 years ago

and i couldn't find anywhere to set the element's offsetTop or elements's offsetLeft for srcoll event, that can't synchronize with the distance's value in scrollTo method.

allenhwkim commented 7 years ago

It turns out the example have distance offset specified as 10px. Changed it to 0, and it seems working fine now.

allenhwkim commented 7 years ago

Released as 0.7.1, please verify the change

lzm420241 commented 7 years ago

so, it leads the distance become constant, and others can't change distance. maybe someone need to set distance.

lzm420241 commented 7 years ago

and i set distance value = 0 ,but it still work not well

allenhwkim commented 7 years ago

@lzm420241 , if you create a plunker example, I will take a look at it. You can start build plunker example from https://plnkr.co/edit/wLVudY?p=preview&open=app.component.ts by forking it.

The given plunker example uses scrollTo from ng2-utils, which is basically the same one.