Javascript 当窗口滚动到特定位置时触发事件

Trigger events when the window is scrolled to certain positions

提问by Moak

I would like to call functions when the browser window goes beyond a certain point
(e.g the user scrolled the window down beyond 200px from the top

我想在浏览器窗口超出某个点时调用函数
（例如，用户将窗口从顶部向下滚动超过 200 像素

Is there an event I can bind to and then how would I check how much the offset is from the top of the browser to the top of the page?

是否有我可以绑定的事件，然后我将如何检查从浏览器顶部到页面顶部的偏移量？

回答by Khez

You can use onscroll

您可以使用onscroll

function testScroll(ev){
    if(window.pageYOffset>400)alert('User has scrolled at least 400 px!');
}
window.onscroll=testScroll

If you want a jQuery solution you can use scroll.

如果你想要一个 jQuery 解决方案，你可以使用scroll。

回答by David Tang

A popular plugin for what you're describing is jQuery Waypoints.

您所描述的一个流行插件是jQuery Waypoints。

---

---

If you don't wish to use a plugin, the mechanisms are:

如果你不想使用插件，机制是：

$(window).scrollTop(); // returns pixel value
$(window).scroll(function () { /* code here */ });

However, because the scrollevent fires very quickly, you must be careful to put only code that executes quickly inside the handler. A common technique is to "throttle" the rate at which you handle the event by checking if a certain amount of time has passed.

但是，因为scroll事件触发得非常快，所以您必须小心地将快速执行的代码放入处理程序中。一种常见的技术是通过检查是否已经过去了一定的时间来“节流”处理事件的速度。

回答by Arshad Munir

if you dont want to use plugin you may try this

如果你不想使用插件，你可以试试这个

function isScrolledIntoView(elem)
        {
        //alert("method invoked");
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();
        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();
        return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom) && (elemBottom <=      docViewBottom) && (elemTop >= docViewTop));

        }

I had used this function to load images as lazy load. Called this function on scroll and then sent an ajax request based on the value of function returning value. this will send the ajax request when the user had scrolled to the bottom of the element (i.e used as the parameter in the method).

我曾使用此功能将图像加载为延迟加载。在滚动时调用此函数，然后根据函数返回值的值发送 ajax 请求。这将在用户滚动到元素底部时发送 ajax 请求（即用作方法中的参数）。

if(isScrolledIntoView($('.items:last'))){
    //send the ajax request here 
}

this is my first answer on this site. I hope you have will understand

这是我在这个网站上的第一个答案。我希望你会明白

回答by Ivan

Notice that by using

请注意，通过使用

window.onscroll = () => {

  const Ypos = window.pageYOffset;

  if(Ypos > 100) console.log('User has scrolled at least 100px!');

}

You are indeed checking when the user is at least 400pxaway from the top of the window. So when you're scrolling below 400pxyou will trigger the function.

您确实在检查用户何时至少400px远离窗口顶部。因此，当您在下方滚动时，400px您将触发该功能。

That might not be what you are looking for. If you want to only trigger the function at400pxwhen scrolling up or down you can use this code:

那可能不是您要找的。如果您只想在向上或向下滚动时触发该功能，400px您可以使用以下代码：

let below = false;
window.onscroll = () => {

  const Ypos = window.pageYOffset;

  if(Ypos > 100 && !below) {

    below = true;
    console.log('you have passed the "100px mark" while scrolling down');

  } else if(Ypos < 100 && below) {

    below = false;
    console.log('you have passed the "100px mark" while scrolling up');

  }

}

In the code above, I have saved the state of the scrolling in below(trueif below the 100pxmark and falseif above).

在上面的代码中，我保存了滚动的状态below（true如果低于100px标记，false如果高于标记）。

---

---

Compare this:

比较一下：

let below = false;
window.onscroll = () => {

  const Ypos = window.pageYOffset;

  if(Ypos > 100 && !below) {

    below = true;
    console.log('you have passed the "100px mark" while scrolling down');

  } else if(Ypos < 100 && below) {

    below = false;
    console.log('you have passed the "100px mark" while scrolling up');

  }

}

.helper{height:100px;width:100%;border-bottom:5px solid red;position:absolute;top:0}

<div class="helper"></div><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio metus, sollicitudin quis scelerisque eu, interdum non nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi ultricies lacus ut felis fermentum, non malesuada nunc ornare. Quisque laoreet vestibulum varius. Morbi efficitur nisi in nisl rutrum, ac pretium magna vulputate. In est libero, commodo et nisi tristique, faucibus fringilla tortor. Donec sed ornare felis, vitae bibendum dui. Nulla mi nulla, vestibulum sed ullamcorper ut, venenatis at libero. In placerat odio id sapien blandit, a consectetur ligula cursus. Sed cursus dictum ipsum a ultricies.Morbi in odio sagittis, congue orci vel, euismod nisi. Suspendisse sit amet imperdiet nulla. Nullam sollicitudin velit viverra, placerat felis sit amet, rhoncus turpis. Duis et neque malesuada, finibus massa id, ullamcorper dui. Morbi ut fringilla augue. Duis quam sem, lobortis sed gravida eu, sagittis a ex. Cras commodo bibendum tristique. Praesent in pulvinar eros, quis maximus magna. Etiam dui leo, ullamcorper in interdum at, dignissim in sem. Suspendisse ac urna mollis, feugiat eros nec, aliquam purus. Donec eget enim at enim interdum facilisis. Nam non consectetur enim. In non eros quis tortor auctor interdum.Etiam id ipsum risus. Donec ut orci nulla. Duis lacinia, erat vitae maximus efficitur, lectus risus feugiat sem, in suscipit nibh enim efficitur nibh. Fusce sollicitudin lacinia lectus, non malesuada nisi rhoncus id. Sed id congue sem, sit amet tincidunt nulla. Etiam vitae mauris sapien. Aenean ornare volutpat libero sed interdum. Aenean placerat aliquet dolor, eleifend bibendum mi rutrum sit amet. Nullam eu lacus ornare, dapibus ante sit amet, vehicula enim. Vestibulum at euismod ex. Ut at vehicula purus, nec porttitor tellus. Vivamus consequat sapien eu est malesuada, quis varius est aliquet. Sed eu volutpat lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam varius, augue ac pretium commodo, turpis tellus commodo turpis, venenatis tristique velit odio sed quam. Phasellus tempor nisi eu massa elementum bibendum.Sed ac egestas enim. Integer hendrerit, ligula sit amet viverra imperdiet, massa nunc consequat leo, sit amet ornare quam nisi sed elit. In pulvinar libero a ligula consectetur tincidunt. Proin fringilla turpis sagittis dolor facilisis imperdiet. In nec suscipit urna. Sed turpis justo, dapibus ac risus efficitur, lacinia suscipit nunc. Aliquam ex nisl, ultricies quis elit a, rutrum tempus metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis consequat suscipit eleifend. Morbi a euismod augue. In facilisis lacus a est suscipit, non interdum dolor condimentum. Cras aliquet ornare diam sit amet laoreet. Aliquam sed enim varius, efficitur arcu id, tincidunt dui. Nulla scelerisque urna nec feugiat fermentum.Suspendisse sit amet orci lacus. Pellentesque vitae ante finibus, volutpat risus et, posuere orci. Sed posuere tellus sem, sed pulvinar massa finibus ut. Duis tempor rutrum diam a vestibulum. Curabitur at libero eu urna imperdiet vehicula. Etiam aliquet maximus ipsum, eu lobortis lectus rhoncus eget. Suspendisse semper facilisis lectus. Curabitur non lectus a risus ullamcorper ultricies non pulvinar diam. Sed euismod imperdiet facilisis. Fusce sagittis nibh vel lorem accumsan fringilla.Fusce ac leo lacus. Nullam dictum id orci nec semper. Nam non ultrices tellus. Curabitur felis erat, bibendum sit amet quam eu, luctus finibus leo. Nullam ac porta nibh, eget euismod mauris. Phasellus posuere enim sed tellus fermentum, nec vehicula nisi mattis. Vivamus elementum varius enim, vulputate dignissim enim iaculis sit amet.Vivamus pellentesque, enim vitae porta pulvinar, eros turpis tempor mauris, in facilisis dui libero in purus. Nunc erat purus, tristique vitae ex non, commodo cursus purus. Nulla fermentum quam ac vestibulum facilisis. Duis semper nunc orci, non fringilla sem placerat ut. Mauris posuere eu urna a gravida. Nam ullamcorper, ligula a ultricies feugiat, mi ipsum viverra diam, vel aliquam velit mauris eu diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed magna dolor, malesuada at orci ut, vehicula dignissim dolor. In odio libero, vestibulum eu rhoncus eu, tempus sed diam.Sed eget hendrerit elit, a tincidunt sapien. Suspendisse potenti. Aliquam facilisis nibh quis pulvinar condimentum. Ut interdum quam non mauris faucibus, a faucibus felis interdum. Maecenas porttitor, lorem vel fringilla semper, orci arcu varius justo, ut convallis tellus lectus et metus. Quisque porta dolor magna, ac convallis tortor egestas eu. Integer in ligula eget ipsum blandit interdum.Cras viverra, dui finibus dictum scelerisque, quam arcu vehicula sapien, vel varius sem risus sed nulla. Cras sit amet lacus a quam vestibulum consequat et ut enim. Nunc vestibulum libero a nisi euismod tincidunt. Sed vel mollis risus. Cras convallis luctus enim sit amet suscipit. Vivamus egestas metus ut luctus consequat. Aliquam rutrum elit eu interdum consequat. Donec metus odio, sagittis sit amet bibendum nec, convallis nec nisl. Quisque eget nisl bibendum, fermentum mauris non, dictum quam. Nunc pretium faucibus risus sed pellentesque. Maecenas dictum sodales justo id rutrum. Cras vel feugiat turpis.Quisque a malesuada nunc, non vulputate magna. Quisque ac leo consequat, auctor orci vitae, pulvinar tellus. Pellentesque euismod arcu a lacinia condimentum. Vestibulum et purus neque. Donec libero erat, auctor sed tempus et, auctor at nisl. In eu elit non turpis dapibus facilisis. Vestibulum sodales ex purus, ut ultricies risus mattis non. Donec id elementum nunc.</div>

to this:

对此：

window.onscroll = () => {

  const Ypos = window.pageYOffset;

  if(Ypos > 100) {

    console.log('you have passed the "100px mark" while scrolling down');

  } else if(Ypos < 100) {

    console.log('you have passed the "100px mark" while scrolling up');

  }

}

.helper{height:100px;width:100%;border-bottom:5px solid red;position:absolute;top:0}

<div class="helper"></div><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio metus, sollicitudin quis scelerisque eu, interdum non nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi ultricies lacus ut felis fermentum, non malesuada nunc ornare. Quisque laoreet vestibulum varius. Morbi efficitur nisi in nisl rutrum, ac pretium magna vulputate. In est libero, commodo et nisi tristique, faucibus fringilla tortor. Donec sed ornare felis, vitae bibendum dui. Nulla mi nulla, vestibulum sed ullamcorper ut, venenatis at libero. In placerat odio id sapien blandit, a consectetur ligula cursus. Sed cursus dictum ipsum a ultricies.Morbi in odio sagittis, congue orci vel, euismod nisi. Suspendisse sit amet imperdiet nulla. Nullam sollicitudin velit viverra, placerat felis sit amet, rhoncus turpis. Duis et neque malesuada, finibus massa id, ullamcorper dui. Morbi ut fringilla augue. Duis quam sem, lobortis sed gravida eu, sagittis a ex. Cras commodo bibendum tristique. Praesent in pulvinar eros, quis maximus magna. Etiam dui leo, ullamcorper in interdum at, dignissim in sem. Suspendisse ac urna mollis, feugiat eros nec, aliquam purus. Donec eget enim at enim interdum facilisis. Nam non consectetur enim. In non eros quis tortor auctor interdum.Etiam id ipsum risus. Donec ut orci nulla. Duis lacinia, erat vitae maximus efficitur, lectus risus feugiat sem, in suscipit nibh enim efficitur nibh. Fusce sollicitudin lacinia lectus, non malesuada nisi rhoncus id. Sed id congue sem, sit amet tincidunt nulla. Etiam vitae mauris sapien. Aenean ornare volutpat libero sed interdum. Aenean placerat aliquet dolor, eleifend bibendum mi rutrum sit amet. Nullam eu lacus ornare, dapibus ante sit amet, vehicula enim. Vestibulum at euismod ex. Ut at vehicula purus, nec porttitor tellus. Vivamus consequat sapien eu est malesuada, quis varius est aliquet. Sed eu volutpat lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam varius, augue ac pretium commodo, turpis tellus commodo turpis, venenatis tristique velit odio sed quam. Phasellus tempor nisi eu massa elementum bibendum.Sed ac egestas enim. Integer hendrerit, ligula sit amet viverra imperdiet, massa nunc consequat leo, sit amet ornare quam nisi sed elit. In pulvinar libero a ligula consectetur tincidunt. Proin fringilla turpis sagittis dolor facilisis imperdiet. In nec suscipit urna. Sed turpis justo, dapibus ac risus efficitur, lacinia suscipit nunc. Aliquam ex nisl, ultricies quis elit a, rutrum tempus metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis consequat suscipit eleifend. Morbi a euismod augue. In facilisis lacus a est suscipit, non interdum dolor condimentum. Cras aliquet ornare diam sit amet laoreet. Aliquam sed enim varius, efficitur arcu id, tincidunt dui. Nulla scelerisque urna nec feugiat fermentum.Suspendisse sit amet orci lacus. Pellentesque vitae ante finibus, volutpat risus et, posuere orci. Sed posuere tellus sem, sed pulvinar massa finibus ut. Duis tempor rutrum diam a vestibulum. Curabitur at libero eu urna imperdiet vehicula. Etiam aliquet maximus ipsum, eu lobortis lectus rhoncus eget. Suspendisse semper facilisis lectus. Curabitur non lectus a risus ullamcorper ultricies non pulvinar diam. Sed euismod imperdiet facilisis. Fusce sagittis nibh vel lorem accumsan fringilla.Fusce ac leo lacus. Nullam dictum id orci nec semper. Nam non ultrices tellus. Curabitur felis erat, bibendum sit amet quam eu, luctus finibus leo. Nullam ac porta nibh, eget euismod mauris. Phasellus posuere enim sed tellus fermentum, nec vehicula nisi mattis. Vivamus elementum varius enim, vulputate dignissim enim iaculis sit amet.Vivamus pellentesque, enim vitae porta pulvinar, eros turpis tempor mauris, in facilisis dui libero in purus. Nunc erat purus, tristique vitae ex non, commodo cursus purus. Nulla fermentum quam ac vestibulum facilisis. Duis semper nunc orci, non fringilla sem placerat ut. Mauris posuere eu urna a gravida. Nam ullamcorper, ligula a ultricies feugiat, mi ipsum viverra diam, vel aliquam velit mauris eu diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed magna dolor, malesuada at orci ut, vehicula dignissim dolor. In odio libero, vestibulum eu rhoncus eu, tempus sed diam.Sed eget hendrerit elit, a tincidunt sapien. Suspendisse potenti. Aliquam facilisis nibh quis pulvinar condimentum. Ut interdum quam non mauris faucibus, a faucibus felis interdum. Maecenas porttitor, lorem vel fringilla semper, orci arcu varius justo, ut convallis tellus lectus et metus. Quisque porta dolor magna, ac convallis tortor egestas eu. Integer in ligula eget ipsum blandit interdum.Cras viverra, dui finibus dictum scelerisque, quam arcu vehicula sapien, vel varius sem risus sed nulla. Cras sit amet lacus a quam vestibulum consequat et ut enim. Nunc vestibulum libero a nisi euismod tincidunt. Sed vel mollis risus. Cras convallis luctus enim sit amet suscipit. Vivamus egestas metus ut luctus consequat. Aliquam rutrum elit eu interdum consequat. Donec metus odio, sagittis sit amet bibendum nec, convallis nec nisl. Quisque eget nisl bibendum, fermentum mauris non, dictum quam. Nunc pretium faucibus risus sed pellentesque. Maecenas dictum sodales justo id rutrum. Cras vel feugiat turpis.Quisque a malesuada nunc, non vulputate magna. Quisque ac leo consequat, auctor orci vitae, pulvinar tellus. Pellentesque euismod arcu a lacinia condimentum. Vestibulum et purus neque. Donec libero erat, auctor sed tempus et, auctor at nisl. In eu elit non turpis dapibus facilisis. Vestibulum sodales ex purus, ut ultricies risus mattis non. Donec id elementum nunc.</div>