Cannot Get Sticky Horizontal Scroll to Work?

I Need Help
1

Hello!

I was wondering if it is possible to create a horizontal scroll area that is sticky and “forces” the viewer to scroll through all of the horizontal scroll sections and upon completing it would “release” to return to regular scrolling on the rest of the page. I know how to do this in Webflow and thought it might be similar for blocsapp but can’t seem to figure it out. Would really appreciate some guidance!

For example, something like this: Sticky + Horizontal Scroll Demo - Webflow

Thanks!

1 Like
2

I would like to know how to do this also!

3
  1. Create a section in Blocs that will contain your horizontal scroll content
  2. Set this section to a specific height (like 100vh to take up the full viewport)
  3. Inside this section, create a row with multiple columns for your horizontal content
  4. Add custom CSS to make this row scroll horizontally
  5. Add custom JavaScript to handle the scroll hijacking behavior

The most challenging part will be the JavaScript to control the scroll behavior. You’ll need code that:

  • Detects when the user scrolls to this section
  • Prevents normal vertical scrolling
  • Converts vertical scroll input to horizontal movement
  • Detects when the user reaches the end of the horizontal content
  • Releases control back to normal vertical scrolling

Here’s the custom JavaScript you’ll need to create a horizontal scroll section that forces users to scroll through the entire horizontal content before continuing vertical scrolling:

To implement this in your Blocs project:

  1. First, set up your HTML structure:

    • Create a section for your horizontal scroll area
    • Add the class horizontal-scroll-section to this section
    • Inside this section, create a row that will contain your horizontal content
    • Add the class horizontal-content to this row

  2. Add this CSS to your project (in Blocs, you can add this in the Page Settings > Head Code area):

  3. Add the JavaScript to your project (in Page Settings > Footer Code area in Blocs).

  4. Customize the content inside your horizontal row:

    • Each column in the row will be a separate “slide” in your horizontal scroll
    • You might need to adjust the CSS depending on how you want the content to appear

This script:

  • Detects when the user scrolls to your horizontal section
  • Forces horizontal scrolling while the user is trying to scroll vertically
  • Prevents vertical scrolling until the user has scrolled through all horizontal content
  • Resumes normal vertical scrolling after the horizontal content is complete
  • Resets the horizontal position when the user scrolls back up past the section

You can adjust the scroll speed by changing the value 25 in the line horizontalDistance += scrollDirection * 25;

if you have questions or it doesn’t work, use Claude AI to analyze your site. Tell it what you want to do and it will give you the code you need, probably after three or four iterations. Let us know if it works!. Godspeed!
css and js code.zip (2.6 KB)

4

Wow, I have not seen anyone use this in some time now. PM, I would like to know why you used it.

5

Because when adventurers set off into the great unknown, it was the traditional valediction. I have never fully understood: Does it mean to move at the speed of a god? Or is it a possessive and the apostrophe got dropped over time-- if that’s the case then it’s really weird. My personal translation is “Good luck, hope you make it back”, and my use in this instance was to denote the strange new AI world we’re entering . My solution was AI generated and I had hope to impart a sense of venturing into the great unknown. I hope that clarifies. May the Force be with you!