Hey,
How do I go about achieving a horizontal scroll like on https://scarehunt.com? (a bubble site)
I have a repeating group and its set to horizontal scroll but it causes problems with chrome back button swipe.
Paul
It looks like the website you linked to opens in a new tab when something is clicked?
You could do the same thing with your app by drawing a link element over the repeating groups cell, which would open the link in a new tab (and check the box for opening the link in a new tab).
Sorry, maybe I wasn’t clear I was wondering how they have achieved this UI:
in particular a forced scroll bar like this:
Thanks 
As in you want the scroll bar itself to be visible? Each browser interprets the display of the scroll bar a bit differently (ie. on Widows, I believe it is visible by default, but on Chrome it is only visible while scrolling).
If you want to have a scrollbar visible, there are a handful of plugins (search for Custom scrollbar - like this one) that may accomplish what you’re looking for.
Hey,
Not quite, I just want an effective way to scroll through a repeating group horizontally. At the minute it doesn’t work out the box, because if you’re using a mac and swiping left and right- Chrome and Safari uses that gesture to navigate back and forward pages in the browser.
These guys seem to have made it work some how. 
… on mobile, right? I think they must be plopping some widget in based on device. Been a while since I looked at that (cool) site, but I think on mobile it’s swipeable, which implies the element IS NOT a Bubble RG at those widths/on those platforms. (Spitballing here.)
I may still be missing what you’re mentioning, but it doesn’t appear that they’re doing anything special.
I tested their website started on cnn.com > went to scarehunt.com in my browser > swiping outside of the repeating group with three fingers (ie. trigger Swipe between pages) still goes back. Using two fingers for scrolling.
Nah, it’s swipeable on mobile. So there’s some groovy widget there, right? Just tried iPhone 6.
It’s a slick site. I’d recommend the OP contact the creator.
Hey @pauljamess -
Sorry just seeing this now. I built ScareHunt. Here’s how I got the scrollbar to look that way, I did it with some custom CSS.
-
Go to “Settings”
-
Go to SEO / metatags
-
Paste the below snippet of CSS into the “Script/meta tags in header” block.
<style>
/* width */
::-webkit-scrollbar {
width: 10px!important;
}/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 0;
border-radius: 0px;
}/* Handle */
::-webkit-scrollbar-thumb {
background: rgba(41,41,41,.9);
overflow: visible;
border-radius: 10px;
}/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: rgba(85,85,85,.4);
}</style>
Picture to explain 1, 2, 3 further
Hope this helps!
-Adam
12 Likes
Related tip: If someone just wanted this look/behavior on a single page, you could put the same CSS code in the header for the page object in question:
(Edit: No idea why sometimes pasted images look jacked up here, but just click on the image to see it properly ^^^^)
@arrev, your site is really nice. Hope you get your performance issues sorted!
4 Likes