A visual indicator of page scroll on Gatsby websites
npm install --save gatsby-plugin-scroll-indicator
These options are not required. To have a 3px high, Gatsby purple (#663391
) scroll indicator on all of your pages, add the plugin to your plugins array in gatsby-config.js
:
...
plugins: [
`gatsby-plugin-scroll-indicator`
]
...
Any solid hex color code is valid. e.g.
color: #663391
This option will accept any valid value for the background CSS property.
If not provided, the default value is Gatsby purple themed CSS gradient:
linear-gradient(to right, #CC99F7, #663391)
The height of the scroll indicator, in pixels.
If not provided, the default height is 3px
.
An array of globbing patterns to specify where the scroll indicator should show.
If not provided, the indicator will show for all paths.
The z-index option specifies the stack order of the indicator element.
If not provided, the default value is 9999
.
// gatsby-config.js
plugins: [
{
resolve: `gatsby-plugin-scroll-indicator`,
options: {
// Configure color of the scroll indicator
color: "#663391",
// Height of the scroll indicator
height: "3px",
// Configure paths where the scroll indicator will appear
paths: ["/", "/blog/**"],
// Configure the z-index of the indicator element
zIndex: `9999`,
},
},
];