Need help with a scrolling feature in HubSpot
I’m trying to add a cool scrolling effect to my HubSpot website template. I know I can do it in a Custom HTML module, but I’m wondering if there’s a way to make it more flexible.
I tried setting up a ‘group’ module with the main ID and then adding ‘rich text’ modules inside it with special classes. But it’s not working right. The scrolling stops after the first section.
I think the problem might be that HubSpot adds extra stuff in the HTML, so the sections aren’t directly under the main container like they should be.
Does anyone know if there’s a trick to make child modules appear right under the parent in the final HTML output? Or is there another way to get this scrolling effect working in HubSpot without using Custom HTML?
Thanks for any tips!
I’ve been down this road before, and I found a solution that might work for you. Instead of relying on HubSpot’s built-in modules, I created a custom HTML module for the entire scrolling section. Inside this, I used HubL to dynamically pull in content from HubSpot fields.
This approach gives you full control over the HTML structure without HubSpot adding extra wrappers. For the scrolling effect, I used the Intersection Observer API in JavaScript. It’s more performant than traditional scroll listeners and works well with HubSpot’s environment.
One caveat: you’ll need to style everything from scratch, but it’s worth it for the control you gain. If you’re not comfortable with custom coding, you might want to consult with a HubSpot developer. They can set up a reusable custom module that your team can easily update through the CMS.
hey harry, i’ve faced similar issues. try using custom css to target specific classes hubspot adds. like ‘.hs-row’ or ‘.widget-span’. this might help override the default structure. also, check if your js is firing after the dom loads. sometimes that causes scroll probs. good luck!
I’ve encountered this challenge before, and there’s a workaround that might help. Instead of using a group module, try creating a custom module in HubSpot. This gives you more control over the HTML structure. In the custom module, you can define fields for content and use HubL to render them. This approach allows you to maintain the desired HTML hierarchy without HubSpot injecting extra elements. For the scrolling effect, implement it using JavaScript that targets the custom module’s structure. This method offers more flexibility and reliability compared to working with standard HubSpot modules for complex layouts and interactions.