Jump to content

Horizontal scroll bar for summary block

Recommended Posts

Site URL: https://www.sisutemplates.com

Hi! I'd like to switch the arrow buttons in 7.1 to a horizontal scroll bar. I believe you can do this by removing the overflow property, but I can't seem to get it to work. Any thoughts?

A brand designer & strategist creating brands that bridge the gaps between artistry, strategy, and thoughtful consideration. Creator of Studio Founded, a digital resource library for purposeful business owners. 
💻 Shop Squarespace Templates
✍️ Curated Business Resources

🥰 Complimentary Downloadables
🤍 Bespoke Branding & Websites

Links in my posts may be affiliate links.

Link to comment
  • Replies 7
  • Views 1.9k
  • Created
  • Last Reply

Top Posters In This Topic

2 hours ago, HannahRoseShaw said:

Site URL: https://www.sisutemplates.com

Hi! I'd like to switch the arrow buttons in 7.1 to a horizontal scroll bar. I believe you can do this by removing the overflow property, but I can't seem to get it to work. Any thoughts?

Try adding to Home > Design > Custom Css

#block-yui_3_17_2_1_1648471245721_18422 .summary-item-list {
  overflow-x: scroll;
  transform: translateX(0%) !important; /*Stop next click event*/
 }

#block-yui_3_17_2_1_1648471245721_18422 .summary-carousel-pager {
  visibility: hidden;
}

Let me know how it works on your site

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

My testing

image.thumb.png.9d58b26a205e262efd7373f79650609b.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
On 3/28/2022 at 2:42 PM, bangank36 said:

My testing

image.thumb.png.9d58b26a205e262efd7373f79650609b.png

Perfect, thank you! 

Is there a way to show the scroll bar from the outset? At the moment it only shows on scroll. 

A brand designer & strategist creating brands that bridge the gaps between artistry, strategy, and thoughtful consideration. Creator of Studio Founded, a digital resource library for purposeful business owners. 
💻 Shop Squarespace Templates
✍️ Curated Business Resources

🥰 Complimentary Downloadables
🤍 Bespoke Branding & Websites

Links in my posts may be affiliate links.

Link to comment
  • 4 months later...
  • 1 year later...
On 4/9/2024 at 12:59 PM, Desnoir said:

Hi just hoping someone call help me with this code above and how you can then style the scrollbar? Thanks!

If you share link to page where you use summary block, we can check easier

Or try this CSS first

/* width */
div.summary-v2-block::-webkit-scrollbar {
  width: 10px;
}

/* Track */
div.summary-v2-block::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
div.summary-v2-block::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
div.summary-v2-block::-webkit-scrollbar-thumb:hover {
  background: #555;
}

 

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...

Hello, 

I'm trying to achieve something similar - having a horizontal scrollbar visible on my summary carousel block. 
I've added the code above (overflow-x: scroll) which gets the scrollbar to appear, however the styling that @tuanphan posted above doesn't seem to work. 

Is there a way to: 
1. Style the scrollbar, so it's black and white, as per the screenshot attached
2. When you click the navigation arrows, can they scroll one item at a time. I don't want to hide the arrows, but when you click them, they don't scroll properly through the other tiles. 

My site is: 
https://beseensocials.squarespace.com/about
password: bandit

Many thanks

Screenshot 2024-06-20 at 11.53.29 pm.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.