Skip to content
This repository has been archived by the owner on Oct 28, 2020. It is now read-only.

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

Closed
louisnovick opened this issue Jan 9, 2018 · 8 comments
Closed

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

louisnovick opened this issue Jan 9, 2018 · 8 comments
Labels
help wanted question

Comments

@louisnovick
Copy link

louisnovick commented Jan 9, 2018 •
edited
Loading

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
Copy link
Contributor

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

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

Thanks for sharing!!!

@louisnovick
Copy link
Author

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
Copy link
Contributor

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

~Thanks

@louisnovick
Copy link
Author

https://codepen.io/louisnovick/pen/Rxyxao

@yowainwright
Copy link
Contributor

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

@uturnr
Copy link

uturnr commented Apr 26, 2018 •
edited
Loading

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)

@yowainwright
Copy link
Contributor

@uturnr thoughts here?

@yowainwright
Copy link
Contributor

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
help wanted question
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@yowainwright @louisnovick @uturnr