dollarshaveclub/scrolldir

If body has height: 100%; scroll direction will not change.

louisnovick opened this issue · 8 comments

louisnovick commented

Version 1.2.18

If the body has height: 100%; the scroll direction does not change. As soon as I set the body height to auto it works as intended. This occurred because https://semantic-ui.com sets the height of both html and body to 100% by default. Is it worth amending this in case someone runs into a similar issue?

yowainwright commented

@louisnovick thank you very much for the note. Does this help?

// just a thought?
scrollDir({ el: 'your-new-selector' });

Thanks for sharing!!!

louisnovick commented

If I set

scrollDir({ 
  el: document.querySelector('.main')
});

.main being a top level div it does not work so long as body has height set to 100%.

yowainwright commented

@louisnovick could you supply a codepen or jsfiddle/bin?

~Thanks

yowainwright commented

@louisnovick thanks! Hopefully I can look over it very soon!

uturnr commented

This is my attempt to show steps towards allowing the use of a scrollable element instead of the entire window. I worked off of dist/scrollheight.auto.js on github. (The npm release is not up to date)

I added an option called scrollEl that allows selection of a scrollable element instead of the window. In the example, I use the .wrapper div and set it to height: 100%; overflow: scroll;. scrollEl defaults to window if the option isn't used. Everywhere window would be checked for height or scroll properties, I try checking for an either an element property or a window property. I didn't use the el option, so the data-scrolldir attribute is still set on the <html> element:

https://codepen.io/uturnr/pen/gzMNme

Normal usage without the el option, when <html> and <body> are not 100%:

https://codepen.io/uturnr/pen/erzwBO

I tried the above because I want to use this feature on a scrollable element within a project I'm working on. However, there may be a simple fix for this specific issue:

Change:
var yMax = body.offsetHeight - win.innerHeight;
to:
var yMax = body.scrollHeight - win.innerHeight;

Revised version of @louisnovick's codepen:

https://codepen.io/uturnr/pen/erzwwz

(That change could be applied to my original codepen too)

  • 👍1
yowainwright commented

@uturnr published in npm. If there are issues, an option can be added.

  • 🎉1