Horiztonal scrolling

Questions
1

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

2

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).

3

Sorry, maybe I wasn’t clear I was wondering how they have achieved this UI:

31
311982Ă—470 215 KB

in particular a forced scroll bar like this:

46
461930Ă—70 481 Bytes

Thanks :slight_smile:

4

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.

5

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. :thinking:

6

… 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.)

7

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.

CNN%20-%20Breaking%20News%20Latest%20News%20and%20Videos

8

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.

9

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.

  1. Go to “Settings”

  2. Go to SEO / metatags

  3. 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

scrollbar
scrollbar1811Ă—626 84.3 KB

Hope this helps!

-Adam

12 Likes
10

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:

image
image699Ă—1650 61.8 KB

(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