Automatic snap to certain position by each scroll action

scrolling

#1

I found below function seems good fit with my page:

However I am not sure how to fit it with mind, as I didn’t assign any div on my hype document to define each part, although I know the div would automatically generated by hype. Any idea to fit it or another method to make the same function? thanks…

ps: I would like to make auto scroll to snap to my waypoints or relative position on my page by each scroll action.Dokinse 03 problem.hype.zip (59.2 KB)


#2

Just an hint not a solution:
Using the method mentioned in the CodePen might be a little to cutting edge
https://caniuse.com/#search=scroll-snap-points


#3

Here is an introduction on how it done and how you can make it work across (modern) browsers:

(Given you want to do it like the CodePen example).


#4

Another solution would be to use a scroll end detection (here is a jQuery example)

And then use the scrollTo function with some math calculating the section based on the scroll position

The formular would be something like (pseudo code just to illustrate)

//this goes in the callback onScrollEnd
//var top = is the scroll offset
var sectionHeight = 600; /* your height here */
var section = Math.floor(top / sectionHeight);
var scrollToOffset = section*sectionHeight;
//do the scrollTo... look that up
//… scrollTo(scrollToOffset)

#5

thanks Max, I saw this too, but i have no idea how to embed that code into my hype document, like it stated to have two up div over the content per my understanding…
class=“docScroller” & class= "page…


#6

Do u mean to copy & paste your formular to the head of my scene?.. sorry, a bit complicated to me…


#7

@motchiual No, it is just some hints. In case you don’t understand any of the suggestions maybe your project/task is a bigger bite then you can chew :wink: (This is ment as a friendly joke, just to make this very clear!)

In that case maybe somebody on the forum is willing todo the coding but I currently can’t code your project for you.

Regards!


#8

That said … after dinner I said… what the hell
Just for study (fixed height) but could also be done with varying heights (based on Hype containers etc.):
fixedHeightSectionSnapping.hype.zip (16,2 KB)


#9

Hello Max, sorry for late return, much thanks for your tips, yes, it is really not easy for me, haaa… It drive me more interested to learn code anyway… ha… in last week, I actually studied and tried a lot for your tips and others. However the problem cannot be solve still.

I found out what I exactly like to achieve is something like the problem from Ollie Auto-Scroll to next anchor on Mouse-wheel movement ,it seems not yet been solve too. I also building a long scene, it is already included a lot of function setup and some of parts are related to other scene, so I would like to find any method that would not change my scene structure a lot if possible.

I found this script / demo is really close to what I like to do, but I am not too sure how to embed it into my Hype document, would you possible to help or give me any tips again?..
http://manos.malihu.gr/page-scroll-to-id-with-mousewheel-and-keyboard/
I think it is good to detect mouse wheel action to trigger scroll to certain id.

Remarks:

  • In my hype doc, the first page is longer, the other pages are same height, it is a little different to many “Page Scroll” examples they usually with same page height.
  • I saw some of external script / plugin, they request to add “section class” tag to define each page, but I think the “Class Name” tab inside “Identity” tab of Hype is just “div class”. Right?

below method seems similar but not so smooth compare with above, fyr:



http://jsfiddle.net/t6LLybx8/728/

Thanks…Dokinse 04.3.hype.zip (1.8 MB)