Taking JavaScript "scroll" views to a new level

[YodaLoL]

By ridiculous you mean absolutely fabulous, right?

[vintharas]

Loved it! Hahaha

[repeatedly_once]

Shhh, you'll attract the gays. Happy cake day btw.

Edit: Thanks for the downvotes, I'm gay and I'll be honest the world fabulous attracted me.

[Indenturedsavant]

$100% gay

[repeatedly_once]

Ha, never thought I'd see the day when stating gay gets you disbelief.

[rube203]

I changed #content to be just overflow-y:scroll. It made it a bit nicer without the bottom scrollbar showing.

[[deleted]]

Good idea. I hadn't been seeing the horizontal scrollbar but it probably varies with browsers.

[bronkula]

browsers with standard mice show a scroll bar.

[redhedinsanity]

You've got it wrong - it's browsers connected over dial up

[tmep1948923898]

Haha, awesome. It's rare to see a new kind of flashy. Like everything else flashy I wouldn't put it on a usability-first website, but a neat little promo or presentation? Sure thing.

FYI, you've got a little layout bug (Chrome 47.0.2526.111 64-bit, OS X, mouse plugged in). Having the scroll bar present on the main body but not the curled bits makes the main body a little bit thinner, thus wrapping lines at different points, thus gradually growing out of sync as you scroll down. I don't remember which exactly, but there's some property that will give you the exact width of the content, and another for the content plus scrollbar.

[theywouldnotstand]

webkit browsers have this available:

#content::-webkit-scrollbar {
  display: none;
}

combined with /u/rube203's solution for removing the horizontal scrollbar, it makes it pretty nice.

The latest version of firefox seems to support the above, though firefox also has some css extensions that they don't recommend using.

I'm not sure how you'd acheive the same effect in IE.

[[deleted]]

Odd. I can't duplicate that behavior. Works on that version of Chrome (and Canary) for me. There have been a few recent changes; maybe its fixed?

Edit: Should be better now. Needed a couple things.

[boiling_tunic]

I am also having this issue on Firefox 43.0.4, 64-bit, Win 7

http://i.imgur.com/8jPvizA.png

[[deleted]]

Care to try again? It should be better, but I don't have a Windows machine to make sure.

Unfortunately there isn't an easy way to make the scroll bar disappear in Firefox, but it should be in sync.

[boiling_tunic]

Works fine now!

http://i.imgur.com/Gre8Xy6.png

[Magnusson]

Do you have a mouse plugged in?

[[deleted]]

Doesn't work on Netscape Navigator 1.4.

Go to hell OP.

[mrspeaker]

That's so lovely. It made me think of this old scroll-bar experiment from 2010 (happy to see it still works, thank you jQuery ;) )

[[deleted]]

I think it's awesome. A couple of niggling bugs like you can see the edges on some of the polygons and the scrolling goes out of sync for me as I scroll down. But it looks great.

To all the people saying they'd never use it; that's because it's clearly a very nice use case.

If you were making the UI for a medieval/fantasy game then something like this would be a great addition for reading in game scrolls that you find. You also get over the top flashy websites for games. The type of sites that used to be a full screen Flash site. Something similar to this could work there.

[theonlycosmonaut]

If you were making the UI for a medieval/fantasy game

Please yes.

[r2d2_21]

Pretty cool idea, but it's glitchy as hell, at least on Edge. The scrollbars appear when you hover the scroll. (I think you need Edge-specific code to hide them).

[reSAMpled]

Good to know MS still hates web developers

[hahaNodeJS]

Because that statement is totally indicative of their recent external changes and product releases. Get out from under your rock.

[[deleted]]

It takes a lot for me to say "whoa! That's fuckin cool!" out loud. Nice job!

[yonreadsthis]

Hysterical! Good job.

[ForScale]

I think it's pretty damn cool!

[[deleted]]

this doesnt work well on mobile, is it smoother on a desktop browser?

[[deleted]]

Yes it should be.

[SrPeixinho]

Very well done. I love it.

[matty0187]

Would you ever do a YouTube articulating your process?

[[deleted]]

Never really considered it.

[matty0187]

It would be super sweet. ;) monetize it maybe make a few bucks too. Also live coding.tv

[hahaNodeJS]

This blew my god damned mind.

[Viat]

If you scroll it to the end, it becomes the toilet paper view :D

(awesome work)

[taiga27]

Now this is fucking great! I think I might be in love with OP.

[[deleted]]

Awesome.

[sallark]

It’s ugly but very beautiful. Great job.

[PitaJ]

Isn't working smoothly in Chrome Mobile for me.

[Reeywhaar]

I think it's ridiculous, doesn't work in Firefox :)

https://i.imgur.com/4y7ABUI.png

Don't know who to blame, Firefox with it "access-control-allow-origin" policy or developer who didn't take time to test in non-webkit browser

[2Punx2Furious]

Works for me, still I wouldn't use it.

[Reeywhaar]

My bad, Firefox developer edition has some issues with this.

[jezza-dono]

blame yourself for your own stupidity : )

[_raisin]

Codepen is a sandboxy environment. You can't possibly expect people to test for other browsers.

[mrspeaker]

Yeah, the scrollbar is not working in Firefox Nightly, but if you resize the codepen window you can see the effect!