视口 JQuery - 如果元素在视口中，则更改文档准备就绪 [英] Viewport JQuery - change document ready to if element is in viewport

问题描述

在处理一个更大的项目时，我制作了一个包含不同内容的盒子.

该框的宽度为 1000 像素，显示 5 张(共 50 张)图片.盒子页面从前 5 个页面切换到接下来的 5 个页面，以此类推每 8 秒(已经用 jQuery 动画编写了这个).

现在我的问题是，Box 位于我页面的中间，所以当访问者停留在顶部并在 30 秒后向下滚动时，他们会错过我的 Box 中的第一张图片.

所以我的计划是在访问者可以看到框(视口)的那一刻开始对我的框进行分页.

我为此做了一个测试页面

<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box">THIS BOX<br>THIS BOX<br>THIS BOX</div><div class="box"></div><div class="box"></div>.盒子 {边框:2px纯黑色；高度:400px；宽度:200px；边距:0 自动；边距顶部:10px;}

http://jsfiddle.net/H9xr8/

到目前为止我正在使用

jQuery(document).ready(function(){getThemenCount();moveThemenAnimate();});

我的计划是从准备好的文档切换到 if element is in viewport 之类的东西

我一直试图找到不同的方法，但我似乎无法让它工作.

http://jsfiddle.net/moagrius/wN7ah/

仅适用于不同的类和点击.

我想要做的(以及我无法完成的)是我想在 Box 进入访问者的视图的那一刻开始我的动画脚本.这样他就可以从图 1 开始的框中看到我的照片.

有没有可能让它像我计划的那样工作?不知何故，我无法找到如何设置 jQuery 表达式 + 脚本，使其仅在我使用类和单击(如上面的小提琴)时才自行工作

解决方案

你需要监听 window scroll 事件，并触发回调来检查框还在视口中.

从性能方面来看，监听 scroll 事件可能很危险，因为每当用户滚动时，回调自然会触发.使用节流机制限制触发回调的次数被认为是最佳做法.

此工作示例每秒检查用户滚动位置 4 次，并在框出现在视图中后禁用事件侦听器.

http://jsfiddle.net/H9xr8/1/

//文件准备好$(函数(){//从 http://jsfiddle.net/moagrius/wN7ah/定义 isOnScreen 插件$.fn.isOnScreen = function() {var win = $(window);var 视口 = {顶部 : win.scrollTop(),左:win.scrollLeft(),右:win.scrollLeft() + win.width()，底部:win.scrollTop() + win.height()};var bounds = this.offset();bounds.right = bounds.left + this.outerWidth();bounds.bottom = bounds.top + this.outerHeight();return (!(viewport.right  bounds.right || viewport.bottom  bounds.bottom));};//定义在滚动事件监听器中使用的节流函数//参考:http://blogorama.nerdworks.in/javascriptfunctionthrottlingan/功能油门(延迟，回调){var previousCall = new Date().getTime();返回函数(){var time = new Date().getTime();if ((time - previousCall) >= delay) {以前的电话 = 时间；回调.应用(空，参数)；}};}//设置一个事件以每秒监听窗口滚动 4 次$(window).on('滚动'，油门(250，函数(){//如果#the-box 可见，则调用 init 函数并禁用窗口滚动//事件监听器，因为你只想初始化灯箱一次if ( $("#the-box").isOnScreen() ) {//用于演示目的警报('初始化')；//在这里调用你的 init 函数//getThemenCount();//moveThemenAnimate();//关闭滚动监听器$(window).off('scroll');}}));});

While working on a bigger project I made a box with different content.

The box is 1000px width and shows 5 (out of 50) pictures. The box pages swtich from the first 5 to the next 5 and so on every 8 seconds (already wrote this with jQuery animated).

Now my problem is, that the Box is in the middle of my page, so when visitors stay at the top and scroll down like 30 seconds later they miss the first pictures in my Box.

So my plan is it to start the paging of my box at the very moment the visitor can see the box (viewport).

i made a test page for that

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box">THIS BOX<br>THIS BOX<br>THIS BOX</div>
<div class="box"></div>
<div class="box"></div>

.box {
    border:2px solid black;
    height: 400px; 
    width: 200px;
    margin: 0 auto;
    margin-top:10px;
}

http://jsfiddle.net/H9xr8/

so far Iam using

jQuery(document).ready(function(){
    getThemenCount();
    moveThemenAnimate();
});

My plan is to switch from the document ready to a if element is in viewport kind of thing

I've aleasy tried to find different ways but i cant seem to get it working.

http://jsfiddle.net/moagrius/wN7ah/

is only working with different classes and with clicks.

What i want to do (and what i cant get working) is that i want to start my animation script in the very Moment the Box gets in the viewpoer of the visitor. So that he will see my pictures in the box starting from picture 1.

is there any possibility to get this to work like I planed it? somehow I cant find out how to set the jQuery expression + the script to work from itself only if i use classes and clicks (like in the fiddle above)

解决方案

You need to listen for the window scroll event, and fire a callback to check if the box is in the viewport yet.

Listening to the scroll event can be dangerous from a performance aspect, as naturally the callback will fire whenever the user is scrolling. It's considered best practise to limit the times the callback is fired using a throttling mechanic.

This working example checks the user scroll position 4 times every second, and disables the event listener once the box has appeared in view.

http://jsfiddle.net/H9xr8/1/

// document ready
$(function () {

    // define the isOnScreen plugin from http://jsfiddle.net/moagrius/wN7ah/
    $.fn.isOnScreen = function() {
        var win = $(window);

        var viewport = {
            top : win.scrollTop(),
            left : win.scrollLeft(),
            right: win.scrollLeft() + win.width(),
            bottom: win.scrollTop() + win.height()
        };

        var bounds = this.offset();
        bounds.right = bounds.left + this.outerWidth();
        bounds.bottom = bounds.top + this.outerHeight();

        return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom)); 
    };

    // define throttling function for use in scroll event listener
    // ref: http://blogorama.nerdworks.in/javascriptfunctionthrottlingan/
    function throttle(delay, callback) {
        var previousCall = new Date().getTime();
        return function() {
            var time = new Date().getTime();
            if ((time - previousCall) >= delay) {
                previousCall = time;
                callback.apply(null, arguments);
            }
        };
    }

    // set up an event to listen for window scroll 4 times a second
    $(window).on('scroll', throttle( 250, function () {

        // if #the-box is visible the call init functions and disable window scroll
        // event listener, as you only want to initialise the lightbox once
        if ( $("#the-box").isOnScreen() ) {

            // for demo purposes
            alert('init');

            // call your init functions here
            //getThemenCount();
            //moveThemenAnimate();

            // turn off scroll listener
            $(window).off('scroll');
        }
    }));
});

这篇关于视口 JQuery - 如果元素在视口中，则更改文档准备就绪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！