(Fk) SuperScroll

[Flitterkill]

SuperScroll
Awesome page scrolling, custom scrollbars.

http://gfycat.com/MarriedTiredAtlanticsharpnosepuffer

SuperScroll is an IPS 4 plugin that changes the default scrolling behavior when browsing IPS 4 webpages. With SuperScroll you can can control the speed and feel of how all IPS webpages move (with easing) and change the look and feel of the browser scrollbar. SuperScroll is based on Nicescroll, a jQuery plugin. 

Page Movement:

SuperScroll attaches to the entire HTML element and binds to mousewheel, up/down keys, and the spacebar. All IPS webpages will now scroll smoothly with the settings you specify. Any additional interior elements (such as editor boxes, etc) that have scrollbars will NOT be affected and will behave as usual. 

Custom Scrollbars:

When using SuperScroll the browser's native scrollbar is replaced with two divs - one used as the background rail, the other for the cursor that travels up and down overtop the rail. These divs collectively float over top of your page content. You can customize nearly everything for both divs.

Such as? Add a fixed background to the rail with a branding/theme element from your community. Maybe cut a sponsorship deal and stick a static ad as the background for the rail. Change the cursor to a circle. Set both the cursor and the rail to transparent - still grabbable but no one will ever see the scrollbars on your pages again! How about an image as the cursor? Animated? Why not!

Settings Available:

Page Movement: Distance each wheel notch/key click will move the page in pixels. Speed of that movement. 

Entire Scrollbar: Auto fade out on/off, fade out delay time, opacity of the entire scrollbar on full-fade, opacity of the entire scrollbar when fully visible. Z-index number to ensure the scrollbar never gets hidden by other page elements, move the scrollbar from the right side to the left side of the page.

Scrollbar Cursor: Width, Color, Radius (to round the edges or make a completly round cursor), Minimum cursor height, fixed cursor height, top and bottom buffers, css borders, right padding to nudge the cursor away from the edge of the page. Transparency with the RGBA toggle. Set an image as the cursor!

Scrollbar Rail: Width, color, full control of CSS background call (including transparency and image).

 

You can get SuperScroll in the IPS Marketplace for 8, renews yearly at 3 (but you can probably ignore those invoices, SuperScroll is pretty much future proof)

Get SuperScroll here!

 

Current Version: 1.0.1
Fixed loading location when theme setting places Javascript loads at bottom of page instead of header.

Previous Versions:
1.0.0 - Initial release.

 

[Flitterkill]

Common Settings and Questions:

Page Scrolling Speed and Distance

The default speed is set at 40. 20-25 is pretty snappy. Lower than that and you are approaching what the browser does normally. Slow your roll with settings higher than 80.

Distance per key press or wheel click (scroll step) is defaulted to 100px. Moving higher or lower than this can make browsing a little hard but there is certainly room for adjustment.

If you were set the scroll step to 20px and speed to 200 you would have a very smooth scroll that moves at a snail's pace. Set the scroll step to 200px and speed to 10 and it is snappy fast and almost impossibly quick. Have fun tweaking these settings. 
 

How do I set a single image as a cursor?

Get the (Small? Doesn't have to be...) image that you want to use. Make sure that the surrounding contents of the image are transparent of course. Set that as the cursor background. Use the RGBA setting for the rail background and set the A value at 0.0 making the rail completely transparent. Set the cursor to a fixed height equal to the height of the background image you used. All set!

You really do have free reign to change the scrollbar however you want. You can make things look really professional, match your community's themes/colors perfectly, or annoy everyone by swapping the cursor for a giant head of Justin Beiber. All up to you!

What's the deal with the right positioning?

The rail divs are parked up against the right (or left) side of the screen. You can now increase the width of the rail but it will still stay stuck in its spot, only bigger. The cursor rides the rail so to speak. It is floated *RIGHT*, always apparently. When you use that cursor positioning call you are moving it X-number of pixels away from the edge. That means if you set the rail to 20, and the cursor to 18, and the cursor right padding at 0. You will see a 2px flare of the rail on the left edge of the scrollbar. How can you use this?

If you set right positioning to 1 in the above instance, now you will have the cursor "encased" within the rail with 1px of rail visible on either side of the cursor. Change the vars to rail 40 wide, cursor 20 wide, and right positioning to 10 and you end up with what appears to be 10px of rail, 20px of cursor, and 10px of rail visible.

You can, when the rail is set to the right side, blow the cursor outside of the rail edges. If the rail is set at 20px, and the cursor is set at 20px (a clean modern look that is...) any right positioning will push the cursor out beyond the rail. Use this as you will. There might be some fun design opportunities with this.
 

What if the rail is set to the left side of the screen?

Remember that the cursor is always floated right. You can still do most of the above but you won't be able to blow the cursor beyond the rail borders as there is no left positioning available. What you will be doing when positioning the cursor is moving it away from the right edge of the rail. Hope to address this later on but this is an internal to Nicescroll thing right now.

How is the opacity settings I see under the Scrollbar tab different from the RGBA CSS stuff?

The opacity settings affect the entire scrollbar -both cursor and rail - when you have the autohide feature enabled. You can set how visible the scrollbar is when it is in its hidden state - default being completely - and how transparent it is when it is in its visible state. Perhaps you want the scrollbar to still be somewhat visible when hidden so that people know it is still there? Set the hidden opactiy up a bit. Maybe you want the scrollbar as whole to never be fully visible when in use - set the visible opacity a little lower. Play around, you won;t break anything
 

Try these:

Totally invisible scrollbar - For the rail use the the background CSS option and rgba(100,100,100,0.0). It doesn't matter what the first three numbers are only that the last number is 0.0 for transparent. For the cursor select RGBA color and use that same color call as the rail. Now it is only a question of how big you want the grabbable area to be. Set the cursor to 40 or 400 or ??? and users will still be able to click and hold on the invisible scrollbar to drag and move the page as they want.

Clean modern look - Just make sure the rail and the cursor are the same size.

 

 

[Flitterkill]

Development Notes:

Nicescroll is quite good but the design is not just for entire page scrolling. It also handles horizontal scrolling and more importantly, is also designed for calling on other elements (divs mainly) - it is jQuery after all. That means that some choices made for the main line release don't match up well with what I'm trying to do here as the code is targeting a wider range of uses. Also, the CSS vars you can pass through are really messy in the official Nicescroll release i.e. syntax varies from css call to css call, missing elements, etc. So, not really consistent or planned. I'm using my own fork of Nicescroll with an added width call for the rail and a background-image for the cursor. I'll probably keep working on my fork rather than pushing to the master and waiting.

I will be adding in more customization options. In no particular order or any guarantee of them ever happening in a timely manner...

• Being able to shift the rail location off from the edges of the pages (offset variable currently broke or misfiring)
• Page scroll ease speed (hard coded, probably as a math function? Haven't actually looked yet but it is not a passable variable as of now. Not the highest priority)
• Bumper effect when hitting top or bottom of content is coded but applied only to elements that have a .wrapper class attached and hardware acceleration enabled. This can probably get changed.
• And of course, allowing you to just drag/drop image files for background use rather than just having you call them manually.

I've installed a cursor background image setting but it is pretty basic for now. This like most of the CSS needs to get built out a little more cleanly (if possible). Once built, you'll be able to do some neat things like set the rail to a transparent background but use a large vertical image, fixed, for the cursor. This means as the cursor moves vertially it will traverse the entire background image. Might be some use to that.

Small note on the color picker. IPS 4 was initially (and will in the future i imagine) use the HTML5 color attribute to fire off a browser/operating system embedded colorpicker that has RGBA capabilities. When it became apparent that most current browsers do not fully support this Invision backed off to a javascript fallback picker. The picker they chose unfortunately does NOT have RGBA capabilities. So, either we wait until Invision switches that javascript picker out for one that does do RGBA (there are free ones that do), wait for HTML5 browsers to catch up (that will be awhile) or code around it. This is why handling color transparency stuff is a bit kludgy right now.

[Hunter Lyons]

Not working on the latest update of IPS. Help? 

[Flitterkill]

I've noticed a small bug that's more of a system problem. If the plugin is active when you upgrade an IPS version something gets messed with somewhere. I can't even imagine where...

If you disable the plugin before running an upgrade you should be fine; otherwise uninstalling and reinstalling works as well. I have confirmed this is still working fine on 4.1.11 and so on back.

As is, though it may not fix this problem, I'm going to probably re-engineer this plugin ...sometime... (soon? ehh...) with a different underlying jQuery library.

[Safety1st]

How scrolling looks on phone view?

[Flitterkill]

Untested.

Not sure how I go forward with this. I haven't looked at this plugin in awhile (too many others in dev right now). It's perfectly fine for browsing but I think I'll have to attach a handler to the ckeditor divs. If you are writing or editing a post or comment that is long enough to trigger the editor itself to have a scrollbar if you aren't careful where your mouse cursor is you sometimes start tripping over the SuperScroll stuff.

That and all the other stuff I mentioned above to get to,

Eventually...

[Safety1st]

I'm wondering if you release a cool plugin with 2 buttons to go up and down.