Issue with SmoothScroll feature from Lenis Scroll

No idea what this does and what

not responding very well on <div> containing Youtube videos embed through ARVE plugin.

Is supposed to mean. What is supposed to do? I know scroll hijacking and JS solutions are a bad idea and there is native smooth scroll, so without fully understanding this supposed very popular script I never heard of my reaction would be to just not use it and use native smooth scroll.

https://css-tricks.com/snippets/jquery/smooth-scrolling/

html {
  scroll-behavior: smooth;
}

This is all you need for smooth scroll these days. The link you had shows you can ignore elements from your thing with just adding a class, so you can do that. Still no clue what this thing does and why individual elements need to “respond” to anything.

Hi,

The theme we use is running Lenis Smooth Scroll so I would like to keep that.

Is there a way to apply by default the data-lenis-prevent attribute to all div and iframe ARVE?

• This reply was modified 3 months, 1 week ago by ransack3849.

Hi Nico,

After consulting with the theme developers, here are some additional details about what the Lenis plugin actually does:

The “smooth scroll” feature you refer to is the CSS property?scroll-behavior, which simply modifies how the browser scrolls to a target (e.g., creating smoother animations when navigating anchor links or scrolling to specific elements).
Lenis, on the other hand, is a JavaScript-based library that creates a completely custom scrolling experience. It overrides the native scrolling behavior to provide features like inertial scrolling, easing effects, and frame-based rendering, resulting in a smoother and more controlled scroll. This goes far beyond what the?scroll-behavior?CSS property can achieve. More details are available here:?https://lenis.darkroom.engineering/

Well, you would need some basic JS or the WP HTML API to add the data attribute. It’s out of scope to teach you how to code. I will just add the data attribute to the next version.

No offense, but I find it funny that you need to ask them to explain what this thing does that you say you need. I do not see any fancy animations or anything besides some basic smooth scroll on the site you linked.

You failed to explain what exactly the actual issue is. I asked you how an element is supposed to “responding” and you did not explain it. It seems that while hovering over videos with the mouse cursor and scroll with mouse wheel, the scrolling seems not work correctly and gets stuck or acts weird. It that what you mean? I guess this is it, why did you not explain this? Why do I need to find this out myself?

And this proves my point, from what I learned from an article, scrolljacking is bad. This is what Brave Search AI tells me for “scroll hijacking is bad”.

Scroll Hijacking Consequences

Scroll hijacking, also known as scrolljacking, is a design pattern that alters the normal pace or direction of scrolling on a website. While it may seem innovative or attention-grabbing, it can significantly harm the user experience. Here’s why:

1. Disorientation: Scroll hijacking disrupts users’ expectations of how scrolling should work. This can cause confusion, frustration, and even disorientation.
2. Loss of control: By manipulating the scroll behavior, designers take away users’ control over their browsing experience. This can lead to feelings of powerlessness and annoyance.
3. Inconsistent behavior: Scroll hijacking can create inconsistent behavior across different devices and browsers, making it difficult for users to adapt.
4. Accessibility issues: For users with disabilities, scroll hijacking can exacerbate existing accessibility challenges, such as difficulty navigating or understanding content.
5. Negative impact on usability: Scroll hijacking can increase cognitive load, making it harder for users to focus on the content and complete their tasks.

When to Avoid Scroll Hijacking

1. High-traffic sites: Avoid scroll hijacking on high-traffic sites, as it can lead to user frustration and decreased engagement.
2. General audience: Don’t use scroll hijacking on sites targeting a general audience, as it may confuse or alienate users.
3. Critical information: Avoid hijacking scrolling when users need to quickly access critical information, such as emergency services or important updates.

When to Consider Scroll Hijacking

1. Niche audiences: If you’re targeting a niche audience familiar with innovative design patterns, scroll hijacking might be acceptable.
2. Storytelling: Use scroll hijacking to guide storytelling and progressive disclosure of complex information, as long as it’s well-executed and user-friendly.
3. Brand reinforcement: If you’re looking to reinforce your brand’s innovative or creative identity, scroll hijacking might be a suitable choice.

Best Practices

1. Test and refine: Thoroughly test scroll hijacking designs and refine them based on user feedback.
2. Provide alternatives: Offer alternative methods for users to navigate and control their scrolling experience.
3. Keep it subtle: Avoid overusing scroll hijacking or making it too prominent, as this can be overwhelming.

In conclusion, while scroll hijacking can be an attention-grabbing design element, it’s essential to weigh its potential benefits against the potential harm to the user experience. By understanding the limitations and best practices, designers can use scroll hijacking effectively and respectfully, prioritizing usability and accessibility.

So this will probably not be the last issue you run into by using this thing that you do not need. Just saying.

Hi,

I was hoping you add a data attribute field in the plugin parameters, so that we won’t have to code JS on our end. That would be great if you can include this enhancement in a next release. Thanks for that!

Since our website is a blog with lot of “storytelling” content, I believe it’s a valuable addition.