How can I hide the scroll bar from a specific div block in Webflow without custom CSS styles not working?
TL;DR
- Add a custom Embed element with CSS targeting the div's class to hide its scroll bar.
- Configure the div block by noting its unique class name and applying the CSS within style tags in the Webflow Designer.
To hide the scroll bar from a specific div block in Webflow, follow these straightforward steps to achieve the desired effect without relying on external custom CSS styles.
1. Add a Custom Code Embed
- Drag an Embed element to your project.
- In the embed window, use the Webflow Designer to insert a line of custom CSS within the
<style>tags that specifically targets the div block's class.
2. Configure the Div Block
- Select the desired div block in the Designer.
- Note the class name of the div block you wish to apply the style to. Ensure the class name is unique to avoid affecting other elements.
3. Insert Custom CSS
- In the Embed element, enter the following code:
```css
<style>
.your-div-block-class {
-ms-overflow-style: none; / IE and Edge /
scrollbar-width: none; / Firefox /
}
.your-div-block-class::-webkit-scrollbar {
display: none; / Chrome, Safari, and Opera /
}
</style>
```
- Replace
.your-div-block-classwith the actual class name of your div block.
4. Preview and Publish
- Preview your changes in the Webflow Designer to ensure the scroll bar is hidden for the specified div block.
- Publish your site to make the changes live.
Summary
To hide the scroll bar from a specific div in Webflow, use a custom Embed element with CSS targeting the div's class. This method effectively removes the scroll bar in a cross-browser manner without relying on external stylesheets.