2

I cannot get a div's pageYOffset.

I'm trying to get rid of the html scrollbar so that it only appears between toolbar and footer components instead of getting displayed over them.

Here's an example:

https://codepen.io/anon/pen/xYppdQ

I made html overflow hidden and allowed only a content tag to be scrollable.

Most likely I'm doing something wrong there but OffsetTop stays at 0 when I'm trying to get the value using this method:

onScroll (e) {
  this.offsetTop = window.getElementsByClassName("scroll-container").pageYOffset
}
Un1
  • 3,874
  • 12
  • 37
  • 79
  • Possible duplicate of [Scroll Position of div with "overflow: auto"](https://stackoverflow.com/questions/344615/scroll-position-of-div-with-overflow-auto) – Mario Nikolaus Feb 17 '18 at 23:16
  • 1
    i dont see a scrollbar *over* the footer/header, only in the content section – phil294 Feb 18 '18 at 00:08
  • @Blauhirn yeah, that's the point, I only need it to be displayed between the toolbar and footer, but `pageYOffset` stops working when I do that – Un1 Feb 18 '18 at 15:20

2 Answers2

2

Your problem does not lie in the pageYOffset. The onScroll method gets never executed at all. Try with something easier like v-on:click="..." first.

Also, v-scroll seems to rely on an external library which you havent included in the codepen.

Also also, you probably should not use .getElementBy..blabla but use Vue.js for that: <div ref="myDiv"> and this.offsetTop = this.$refs.myDiv.pageYOffset;. But I dont think pageYOffset is a valid property of any dom node. There is only window.pageYOffset.

phil294
  • 10,038
  • 8
  • 65
  • 98
1

pageYOffset is a read-only window property that returns the number of pixels the document has been scrolled vertically. And scrollY is the exactly same thing.

Umer Jhangi
  • 11
  • 1