jeremenichelli / hunt Goto Github PK

View Code? Open in Web Editor NEW

340.0 10.0 10.0 1.83 MB

👻 Minimal library to observe nodes entering and leaving the viewport

Home Page: https://jeremenichelli.github.io/hunt

License: MIT License

JavaScript 63.55% HTML 36.45%

hunt's Introduction

hunt

👻 Minimal library to observe nodes entering and leaving the viewport.

Be sure to also check the Intersection Observer API, a native solution which works in modern browsers, if you want to know more I wrote an introduction article explaining how it works.

Install

# npm
npm i huntjs --save

# yarn
yarn add huntjs

Or include it as a script with //unpkg.com/huntjs/dist/hunt.umd.js as source.

Usage

The package exposes an observer that receives a Node, NodeList or Array as a first argument and an object as a second argument with the desired set of options.

import Hunt from 'huntjs';

// lazy loading images using dataset and hunt
const lazyImages = document.querySelectorAll('img.lazy');

let observer = new Hunt(lazyImages, {
  enter: (image) => image.src = image.dataset.src
});

Check this example working here

By default the observer will stop hunting elements when they enter and then leave the viewport.

Config options

These are the properties you can set as a configuration:

enter, function called when the element becomes visible.
leave, function method called when the element leaves completely the viewport.

Both callbacks will receive the element which triggered the action as argument.

persist, boolean and false by default which indicates if the targets should still be observed after they entered and left the viewport. When this option is true enter and leave methods will be called each time an element state changes. Recommended for constant animations triggered by scroll events.
offset, number that defines a number of pixels ahead of the element's state change, 0 being the default value. Good if you want to start loading an image before the user reaches to it.
throttleInterval, number interval use for event throttling. A lower number will mean elements are detected in view quicker, but may degrade performace. A higher value will mean elements are detected in view slower, but may improve performance. The default value is 100, is recommended not to modify this.

Custom configuration over dataset

If you need exceptions over config for one or more elements, data-hunt-offset and data-hunt-persist attributes can be used. These custom values will override the ones you passed to the observer.

<div
  class="observed--element"
  data-hunt-persist="true"
  data-hunt-offset="500"
>
</div>

JSON.parse is used on these values at runtime, make sure to pass safe content.

Contributing

To contribute Node.js and yarn are required.

Before commit make sure to follow conventional commits specification and check all tests pass by running yarn test.

hunt's People

Contributors

Stargazers

Watchers

Forkers

michaelachrisco designtips lucasbento fabianjaehnke filoz emilbjorklund marklabenski scottblackburn iandreyev lukasdrgon

hunt's Issues

Individualized Offsets

Hi Jeremias,

Thank you for this script, it is a fantastic function. In your example, you are calling all elements with a specific class name and if you want to alter the offset, you will be altering it for all the elements with with that class. Would it be possible to add the ability to pass a data attribute from the element to alter the offset for just that item?

Thank you

IE9-11

Hey Jeremias -

You did a great job with this plugin, and I think it's the best out there for scroll detection. I've built out my site using it, and started testing, and that's when I ran into an issue in IE. The issue is that on Chrome, Safari, Firefox, when an element comes into view at the bottom it fires properly, but on IE 9-11 on Windows 7, it only fires when the element hits the top of the viewport (when it's about to go out of view). I've tested it with your demo page as well as mine, and I get the same behavior.

Any updates you might have would be greatly appreciated!

Kilian

Remove a hunted element

I have look at the source and it seems that there is no way to remove a hunted element.

The API could be something like this

var removeHuntElement = hunt(document.getElementsByClassName('element'), {
    enter: function() {
        this.classList.add('visible');
    }
}

removeHuntElement()

I can make a PR if it looks good to you

Unbind

Hi,

It would be great to provide a way to unbind events. It's actually nearly impossible to remove the events binded by hunt.

Page depth change without scroll event = issue

Hi. I have a problem - I am filtering a listing, causing a containing div to resize, which brings 'hunted' elements into the viewport. The lack of scroll event means that Hunt doesn't update. Is there anyway I can invoke a Hunt 'update/refresh' programmatically, as I don't want to have to scroll the page? May thanks, Mike

Missing tagged releases

v4.0.0...master

I guess you just forgot to run git push --tags.

Frames are too long on my machine

I’m seeing a bunch of long frames (on the demo page) in Chrome DevTools (marked red):

I'm not an expert in resolving jank issues, so my suggestions are fairly basic: experiment with throttling the "scroll" event, try to see if your code performs layout trashing.

in is a reserved word in javascript

Hi Jeremias,
this is a great plugin - THANK YOU for that!

There is just one problem for me - "in" is a reserved word in javascript, see http://www.w3schools.com/js/js_reserved.asp for a complete list of reserved words.

I would suggest to change ...
Hunted.prototype.in = function() {};
... to ..
Hunted.prototype.inscrolled = function() {};

consequently Hunted.prototype.out should then be renamed to Hunted.prototype.outscrolled

Manfred

Suggestion: adding bower.json

Hi and thank you for this great project.

My experience advises me to ask before making any effort in contributing such thing.
Many authors are strongly against adding a bower.json to their projects, however. I know bower.json is not an optimal solution for 99% of the projects using it. It's only for the laziness.
The only argument against it worth mentioning are the costs of updating the version number in the json file.

I can't change the workflow that much in some old projects I would like to use hunt, so: Would you allow to add a bower.json?

Thank you

Does not correctly handle cases where node.offsetParent != document.body

The updateMetrics method explicitly relies on the node.offsetTop property. This value is relative to the offset parent, which is the closest element that is positioned non-statically, i.e. , has a relative; absolute; or fixed position. This does not need to be the body element that corresponds to the master scroll container.

Scrap what you're doing now and use getBoundingClientRect (which is well-supported just about everywhere). Get coordinates directly in window/viewport space!

It saves you the hassle of manually mucking about with nested offsetParents and saves you the effort of dealing with the page scroll offset to map document-space coordinates to window-/viewport-space coordinates and vice versa, including the headaches of reliable cross-browser scroll offset calculation.