Skip to content

Scroll from 'body' tag can't be caught #100

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
SerikDM opened this issue Oct 18, 2017 · 14 comments
Closed

Scroll from 'body' tag can't be caught #100

SerikDM opened this issue Oct 18, 2017 · 14 comments
Labels
bug

Comments

@SerikDM
Copy link

SerikDM commented Oct 18, 2017

Version

2.2.1

Vue.js version

2.5

What is expected?

Catch scroll event from 'body' element

What is actually happening?

Scroll even isn't caught

How to reproduce this problem?

add style 'overflow-y: scroll' to 'body' element

Solution:
update 'getScrollParent' method to check for 'BODY' tag at last place
`
getScrollParent (elm = this.$el) {
let result

    if (!this.forceUseInfiniteWrapper && ['scroll', 'auto'].indexOf(getComputedStyle(elm).overflowY) > -1) {
      result = elm
    } else if (elm.hasAttribute('infinite-wrapper') || elm.hasAttribute('data-infinite-wrapper')) {
      result = elm
    } else if (elm.tagName === 'BODY') {
      result = window
    }

    return result || this.getScrollParent(elm.parentNode)
  }

`
@PeachScript
Copy link
Owner

That's great! I will fix it in the next version, thank you very much!

PeachScript added a commit that referenced this issue Nov 21, 2017
@PeachScript
Fix the scroll wrapper search bug if the wrapper element is body #100
8b47b2d
@PeachScript
Copy link
Owner

@SerikDM the new version has been released, contains your solution, you can try it now.

@damienbeaufils damienbeaufils mentioned this issue Dec 8, 2017
Closed
@PeachScript
Copy link
Owner

Hello @SerikDM , I'm sorry to tell you I have been rollback this change in the latest version, because I think the situation in this issue is a special case, we'd better use the force-use-infinite-wrapper attribute to solve it rather than change logic of the getScrollParent function, if I didn't rollback this change, it will cause other problems, such as #110 and #111. Perhaps you need to make some changes like this for your program and let it work:

<body infinite-wrapper>
  ...
  <infinite-loading @infinite="infiniteHandler" force-use-infinite-wrapper></infinite-loading>
  ...
</body>

Best regards.

@imman731
Copy link

Hello @PeachScript ,
I using your github example code, but have same question.

Version
2.2.3
Vue.js version
2.5.13
What is expected?
direction="top", scroll to top then loading previous message.
What is actually happening?
infiniteHandler triggering countinously until the full list is loaded.
I search close issues and try to use infinite-wrapper, force-use-infinite-wrapper,
or change distance setting or manually set the scrollTop of the scroll parent to correct value...
it doesn't work : (
How to reproduce this problem?
1.txt

@PeachScript
Copy link
Owner

PeachScript commented Jan 18, 2018 •
edited
Loading

@imman731 maybe this solution can help you: #73 (comment)

@imman731
Copy link

imman731 commented Jan 18, 2018 •
edited
Loading

@PeachScript
I already try this solution. (watch:{...})
but i can't change "this.$refs.xxx.scrollTop", that value always be 0.
I can't figure out why scrollTop value can't change : (

@PeachScript
Copy link
Owner

Are you sure you've found the real scroll wrapper element? You can listen its scroll event to test it.

@imman731
Copy link

@PeachScript
yes, I'm sure I've found the real scroll wrapper element.
I try to setting...
<div class="msg-layout" ref="scrollWrapper" style=**"max-height:800px; overflow: auto;"** infinite-wrapper >
it works.

@PeachScript
Copy link
Owner

PeachScript commented Jan 22, 2018 •
edited
Loading

@imman731 oh, I found you used this.$refs.scrollWrapper.scrollHeight(scrollTop), you should use this.$refs.scrollWrapper.scrollParent.scrollHeight(scrollTop), because the scrollWrapper is a Vue instance and the scrollWrapper.scrollParent is a HTMLElement.

@imman731
Copy link

imman731 commented Jan 22, 2018 •
edited
Loading

@PeachScript
it doesn't work, show up this.$refs.scrollWrapper.scrollParent is undenfine...
another question is using in vue.component with onsenui, infiniteHandler will not trigger to load data

冒昧的提問..
為什麼 direction="top"不像下拉LoadData一樣有個統一的示例?
是不是因為情況太複雜?

@imman731
Copy link

@PeachScript
英文太爛，直接說中文比較快...

我找到問題且成功了，但還是得設定max-height，否則會不斷loading data
Vue.component('chat-content', { template: '<div class="msg-layout" ref="scrollWrapper" style="max-height:800px; overflow: auto;" infinite-wrapper>' +

@PeachScript
Copy link
Owner

@imman731 了解，抱歉上一条是我看错了，你的 scrollWrapper 是绑在滚动元素上的，scrollParent 是要 infinite-loading 的实例才能访问到；max-height 或者 height 其中之一是肯定需要的，否则组件不会出现滚动条，这一点在你陷入无限调用时收到的警告信息里也有提到，源码在这里。

至于你的另一个问题，与此 issue 无关了，请新开 issue 进行讨论。

@imman731
Copy link

@PeachScript
另一個問題是我的失誤，就不另開issue討論了~
感謝您的解說! code我會拜讀的 : )

@PeachScript
Copy link
Owner

@imman731 不客气 :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@SerikDM @PeachScript @imman731