Inserter scroll indicator

[jasmussen]

This PR adds a bottom box shadow to the scroll inserter, indicating you can scroll. This fixes #776.

Originally I also intended to look deeper into whether we could fix scroll bleed. I got far enough that if we add this CSS, we can prevent scrolling of the body content:

.toplevel_page_gutenberg {
	&.is-scroll-locked {
		overflow: hidden;

		.gutenberg {
			overflow: scroll;
		}
	}
}

That worked pretty well — all you had to do with that is add the CSS class is-scroll-locked when mousing over something like the inserter, then remove it again when mousing off. Then scroll bleed solved.

Problem is, it relies on creating a fake scrollbar to indent the page, so there isn't a jarring page "jog" when the scrollbar is locked away. This doesn't work with fixed position elements, beckoning hacks that I don't think we'll want to go into.

As such, it seems if we want to address scroll bleed, we should probably look into https://codepen.io/joen/pen/dMEyjr or https://codepen.io/joen/pen/wGLjWG.

In the mean time, no reason not to merge this in, right?

[ellatrix]

For me there is nothing to scroll now. Also in master. The whole area is expanded.

[jasmussen]

For me there is nothing to scroll now. Also in master. The whole area is expanded.

Yeah sorry, it's a bit hard to test. Try making the viewport really short.

[ellatrix]

Aha. :) This looks good, though I'd love it if the shadow would go away once you reach the end, and a shadow would appear at the top once you start scrolling. Maybe there's a react wrapper component for this somewhere.

[jasmussen]

Aha. :) This looks good, though I'd love it if the shadow would go away once you reach the end, and a shadow would appear at the top once you start scrolling. Maybe there's a react wrapper component for this somewhere.

That would be a nice future improvement!

Also thanks!

[aduth]

This looks good, though I'd love it if the shadow would go away once you reach the end

Only end bit, but related all the same: https://github.com/Automattic/wp-calypso/blob/8e36bb2/client/components/tinymce/plugins/touch-scroll-toolbar/plugin.js#L23-L51