1.0.0 • Published 12 months ago
@antonio-goncalves/hover-on-scroll v1.0.0
HoverOnScroll
HoverOnScroll is a JavaScript library that adds support to hover effects while scrolling the window or a container, it was developed to overcome the limitation of browsers to apply the css :hover
effect during scroll
Sample
The sample available on the dev folder could be run following those steps
npm install
npm run start
Properties
import HoverOnScroll from "@antonio-goncalves/hover-on-scroll";
const hoverOnScroll = new HoverOnScroll([elementToHover1,elementToHover2],options)
function destroy(){
hoverOnScroll.destroy()
}
ElementToHover
First parameter of HoverOnScroll constructor
Name | Type | is Optional | Description |
---|---|---|---|
elementClass | string | no | Class of the element where the "hoverClass" must be applied when hovering |
hoverClass | string | no | Class which will be applied to the element to enable the hover effect |
Options
Second parameter of HoverOnScroll constructor, this parameter is optional
TouchBehaviour
Those options are only relevant for touch devices.
Name | Type | is Optional | Description |
---|---|---|---|
scrollWhenTouch | boolean | yes | Set to true, to scroll to the element on touch |
offsetWhenScroll | Number | yes | vertical offset for the behaviour described on the previous option, is useful to place the content below a navbar |