How can I adjust the scroll speed of a scroll hijack in Webflow to match the built-in scroll speed controlled by the fixed navigation?

Published on
September 22, 2023

To adjust the scroll speed of a scroll hijack in Webflow to match the built-in scroll speed controlled by the fixed navigation, you can follow these steps:

  1. Identify the class or ID of the scroll hijack element: First, you need to identify the element that is being used for the scroll hijack. This can be an element with a specific class or ID assigned to it.

  2. Add a custom code embed: Once you have identified the scroll hijack element, you need to add a custom code embed to your Webflow project. To add a custom code embed, go to the Designer panel and select the page where the scroll hijack is located. Then, click on the "Custom code" icon in the top navigation bar.

  3. Target the scroll hijack element: In the custom code embed, you need to target the scroll hijack element using CSS selectors. You can use either a class or an ID selector to target the element. For example, if the scroll hijack element has a class of "scroll-hijack", you can target it using the following CSS selector: .scroll-hijack

  4. Adjust the scroll speed using CSS: Once you have targeted the scroll hijack element, you can adjust the scroll speed using CSS. You can use the scroll-behavior property to control the scroll speed. The default value for scroll-behavior is auto, which uses the browser's default scroll behavior. To match it with the fixed navigation scroll speed, you can set the value to smooth. Here's an example of how to set the scroll speed to match the built-in scroll speed:

```css
.scroll-hijack {
scroll-behavior: smooth;
}
```

  1. Publish your changes: After adding the custom code embed and adjusting the scroll speed, make sure to publish your changes for them to take effect on your live website.

By following these steps, you should be able to adjust the scroll speed of a scroll hijack in Webflow to match the built-in scroll speed controlled by the fixed navigation.

Additional Questions:

  1. How can I create a scroll hijack effect in Webflow?
  2. What are the benefits of using scroll hijack in Webflow?
  3. How can I customize the scroll bar style in Webflow?