Question

我想要做的就是找到所有＆＃39;部分＆＃39;元素，检测视口中的哪一个，并将className应用于当前节。当滚动出视口时，应该再次删除className。

以下是基础知识。我没有包含插件的所有方法和功能，只是帮助回答问题所需的内容：

// A simple forEach() implementation for Arrays, Objects and NodeLists.
// By Todd Motto
var forEach = function (collection, callback, scope) {
    if (Object.prototype.toString.call(collection) === '[object Object]') {
        for (var prop in collection) {
            if (Object.prototype.hasOwnProperty.call(collection, prop)) {
                callback.call(scope, collection[prop], prop, collection);
            }
        }
    } else {
        for (var i = 0, len = collection.length; i < len; i++) {
            callback.call(scope, collection[i], i, collection);
        }
    }
};

// Determine if an element is the viewport or not
var _isInViewport = function (elem) {
    var rect = elem.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
};

// Get all sections and 
var _getSections = function () {

    var sections = document.querySelectorAll('section');

    forEach(sections, function (section) {

        if (section._isInViewport) {
            section(_isInViewport).classList.add('section-is-in-view');
            alert('yest');
        } else {
            section(_isInViewport).classList.remove('not-in-view');
        }

    });

};


// The event handler
var _eventHandler = function (event) {

    if (event.type === 'scroll') {
        _getSections();
    }

};


// Initialise the plugin
plugin.init = function (options) {

    // Listen for scroll events and run event handler
    document.addEventListener('scroll', _eventHandler, false);

}

注意：一旦它正常工作，我计划添加某种去抖和节流器。

Answer 1

这个不可思议的东西突然袭来我：这是错误的：

if (section._isInViewport) {

_isInViewport要求您将元素作为参数传递，如下所示：

if (_isInViewport(section)) {

您也不需要在事件处理程序中检查事件类型。由于您只是在滚动上调用它，因此您已经知道事件类型是滚动事件。而不是事物：

if (event.type === 'scroll') {
    _getSections();
}

你想要这个：

_getSections();

检测视口中的哪个元素并应用类

1 个答案: