GithubHelp home page GithubHelp logo

Comments (4)

janpaepke avatar janpaepke commented on July 20, 2024

Hi Aston and thank you for your message.
The reason for this phenomenon I believe to be the following:
It stop's working at the PIN IT section, when using the scrollbar.
In the current version of superscrollorama we introduced a new variable "pushFollowers" for pins, that defaults to true, reflecting the previous behaviour.
When superscrollorama reaches a point where something needs to be pinned a spacer is expanded to "push down" following elements. This results in a change of the scale of the scrollbar.
You can observe this by looking at the scrollbar's size, when scrolling down using the mouswheel.
This change in scale, when reaching the pin-point results in a jump, as you are dragging the scrollbar.

I already talked with John about a solution to this. To my mind the solution would be that the spacer should be expanded right from the beginning for pinned elements that "push" followers.
The reason we didn't implement this is that is rather complicated.
First of all the spacer size changes, depending wether it should include the pinned element's size (when pinned) or not (when pinned). Secondly the spacer's position within the dom must change. (after the pin element, when before pinning, before the pin element after pinning.) And this in turn raises another issue as the spacer is also used to "remember" the original position of the pinned element.

You see we are aware of this issue and are considering how to resolve it. A solution could be to add another spacer after the pinned element, but we'd like to avoid adding elements to the dom if it's possible.

For now you can avoid this "bug" by setting "pushFollowers" to false and adding a large enough container after the pinned element. This way the body size doesn't change and you avoid the bug alltogether.

regards,
Jan

from superscrollorama.

stevenalanstark avatar stevenalanstark commented on July 20, 2024

I noticed this also, and for my project we were using parallax layers ( another plugin, not superscrollorama parallax )

because the layers are fixed position, my pinned element was free to flow behind the next layer as it is being parallax'd over the pin. This made for a very nice effect, without increased scroll bar sizes.

from superscrollorama.

AstonHaighMB avatar AstonHaighMB commented on July 20, 2024

Hi Jan thanks for feedback, great help!

from superscrollorama.

janpaepke avatar janpaepke commented on July 20, 2024

Good news, everyone! :)

A solution might be near! Check it out: #94

regards,
Jan

from superscrollorama.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.