تشخیص پایان اسکرول عمودی با جاوا اسکریپت ( js scroll vertical EVENT )
پایان اسکرول عمودی جاوا اسکریپت – شاید برایتان سوال باشد چگونه می توان با جاوا اسکریپت و جی کوئری زمانی که کاربر به پایان اسکرول عمودی می رسد را تشخیص داد .
برای همین موضوع این آموزش به کارتان می آید :
اول از همه به جی کوئری نیاز خواهید داشت .
دموی آموزش ↓
دموی تشخیص اسکرول عمودی
فایل index.html
<!DOCTYPE html> <html lang="fa"> <head> <meta charset="UTF-8"> <title>Rapidcode.iR - سورس کد</title> <link rel="stylesheet" href="static/css/main.css"> </head> <body class="fixed"> <div class="container"> <a id="introduce" href="https://rapidcode.ir" target="_blank">رپید کد • کتابخانه مجازی برنامه نویسان</a> <div class="space" style="height:3000px;background-color:red"></div> </div> <script src="static/js/lib/jquery.min.js"></script> <script src="static/js/app.js"></script> </body> </html>
اسکریپت app.js
$(document).ready(function(){ window.autoScrollElement = function (element) { if(element.hasClass("fixed")){ const windowHeight = window.innerHeight; const minus = element.attr("data-minus") ? Number(element.attr("data-minus")) : 0; const height = windowHeight - minus; element.css("height", height); element.addClass("fixed"); } element.on("scroll", function (e) { const thisElement = $(this); const isWindow = typeof thisElement.get(0).alert == "function"; const domScrollHeight = isWindow ? document.documentElement.scrollHeight : thisElement.get(0).scrollHeight; const domHeight = isWindow ? thisElement.get(0).innerHeight : thisElement.get(0).clientHeight; const maxScrollY = Math.ceil(domScrollHeight - domHeight); const currentScrollY = Math.ceil(thisElement.scrollTop()); console.log(currentScrollY, maxScrollY); if (maxScrollY === currentScrollY) { thisElement.trigger("scrollYEnd"); } }) } const bodyDOM = $(window); autoScrollElement(bodyDOM); bodyDOM.on("scrollYEnd" , function(){ alert("پایان اسکرول عمودی"); }) })
ارسال نظر