برای طرح سوال و دسترسی به آموزش ها سورس کدهای بیشتر به مجموعه xstack و یا به کانال ما در تلگرام کانال ما در تلگرام بپویندید.

JAVASCRIPT: Scrol Touch Device

امروزه در طراحی قالب بحث responsive یا واکنش گرا بسیار داغ میباشد
واکنشگرا چیست:با پیشرفت تکنولوژی و وجود دستگاه هایی مانند تلفن های هوشمند، تبلت ها، تلویزیون های هوشمند و … که میتوانند از اینترنت استفاده کنند نیاز به داشتن وب سایت هایی مطابق با تمامی این دستگاه ها احساس میشد شد اما محدودیتهای زیادی در راه بود که با ظهور تکنیک ها و امکانات کاربردی جدید در نسخه سی اس اس ۳ (css3) و به خصوص مدیا کوئری ها (Media Queries) طراحان وب توانستند وب سایت های کاملا واکنش گرا طراحی کنند

رفع مشکل اسکرول کردن در div هایی با استایل overflow:auto;

تشخیص tuch device

function isTouchDevice() {
        try { document.createEvent("TouchEvent"); return true; }
        catch(e) { return false; }
}

حرکت اسکرول به مکان مورد نظر

function touchScroll(id) {

        if (isTouchDevice()) {

                var e   = document.getElementById(id);
                var sPos = 0;

                e.addEventListener("touchstart", function(event) {
                        sPos = this.scrollTop+event.touches[0].pageY;
                }, false);

                e.addEventListener("touchmove", function(event) {
                        this.scrollTop = sPos-event.touches[0].pageY;
                        event.preventDefault();
                }, false);
        }
}

روش استفاده

کافیست تابع را در زمان load صفحه به صورت زیر استفاده کنید

touchScroll('divscroll');

یا میتوانید این کد را در قالب یک فایل js قرار داده و در فحات مورد نظر فراخوانی کنید

(function(){
        function isTouchDevice(){
                try{
                        document.createEvent("TouchEvent");
                        return true;
                }catch(e){
                        return false;
                }
        }

        function touchScroll(id){
                if(isTouchDevice()){ //if touch events exist...
                        var el=document.getElementById(id);
                        var scrollStartPos=0;

                        document.getElementById(id).addEventListener("touchstart", function(event) {
                                scrollStartPos=this.scrollTop+event.touches[0].pageY;
                                event.preventDefault();
                        },false);

                        document.getElementById(id).addEventListener("touchmove", function(event) {
                                this.scrollTop=scrollStartPos-event.touches[0].pageY;
                                event.preventDefault();
                        },false);
                }
        }

        //On page load
        touchScroll('divscroll')

})();

مثال:
Tuch Scroll

King of delphi and father of persian open source
نوشته ایجاد شد 18

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

نوشته های مرتبط

متنی که میخواهید برای جستجو وارد کرده و دکمه جستجو را فشار دهید. برای لغو دکمه ESC را فشار دهید.

بازگشت به بالا