window.getComputedStyle()?

[Boscop]

I want to implement a higher-order Yew Component that triggers a given Msg when the user has scrolled to the bottom (or top) of a container, for loading more data of a feed for generic infinite scrolling, similar to iron-scroll-threshold.

I found an example with jQuery using .scrollTop() and .height(): https://jsfiddle.net/brynner/QDttv/

scroll_top() is available already, is it the same as in jQuery?

But .height() seems to require window.getComputedStyle() to get the height without padding: https://stackoverflow.com/questions/28606058/what-is-the-equivalent-of-height-and-width-of-jquery-in-pure-javascript https://stackoverflow.com/questions/25197184/get-the-height-of-an-element-minus-padding-margin-border-widths

This doesn't seem to be available in stdweb yet: https://docs.rs/stdweb/*/stdweb/web/trait.IElement.html?search=computed

But it would be very useful for implementing this kind of behavior..

[Pauan]

Rather than getComputedStyle, it's much better to use getBoundingClientRect, clientHeight, offsetHeight, or scrollHeight (as appropriate):

let bounding_height: f64 = node.get_bounding_client_rect().get_height();
let client_height: i32 = js!( return @{&node}.clientHeight; ).try_into().unwrap();
let offset_height: i32 = node.offset_height();
let scroll_height: i32 = js!( return @{&node}.scrollHeight; ).try_into().unwrap();

It seems that clientHeight and scrollHeight aren't implemented yet (but you can easily use them yourself, as shown above).

Since you're doing scroll-related stuff, you'd probably want scrollHeight and offsetHeight (since those are used by that Polymer component:

https://github.com/PolymerElements/iron-scroll-threshold/blob/d30df1a7b77c0419ab25ba7936a25d1308656518/iron-scroll-threshold.html#L197

https://github.com/PolymerElements/iron-scroll-target-behavior/blob/6f4090f7f64c087c3aa51e7537bd646d946afaee/iron-scroll-target-behavior.html#L235-L241