تشخیص پایان اسکرول عمودی با جاوا اسکریپت ( 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("پایان اسکرول عمودی");
	})
	
})

دانلود سورس تشخیص اسکرول عمودی

تشخیص پایان اسکرول عمودی با جاوا اسکریپت ( js scroll vertical EVENT )

دموی تشخیص اسکرول عمودی

فایل index.html

اسکریپت app.js

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید . لغو پاسخ