كيفية تعطيل ميزة التمرير Scroll في الصفحة عبر JavaScript؟

Emad Saif · 1 سبتمبر 2022

أنا أستخدم إضافة scrollTo لمكتبة jQuery، ولدي مشكلة في المؤثرات الحركية Animation في الصفحة، حيث يصبح شكلها سيئًا للغاية عندما تعمل وعند التمرير للأسفل (النزول في الصفحة) في نفس الوقت، لذلك أريد أن أعرف ما إذا كان من الممكن تعطيل ميزة التمرير Scroll في الصفحة مؤقتًا من خلال جافاسكريبت؟

هل توجد طريقة لتنفيذ هذا الأمر؟

Wael Aljamal · 1 سبتمبر 2022

يوجد تعديل بسيط في CSS يمكن القيام به بواسطة جافاسكربت وهو تعديل ارتفاع الصفحة لتملأ الشاشة 100% مع إخفاء overflow وبذلك يتوقف Scroll ثم نعيدهم لما كانت عليه عند الانتهاء من التحريك (أي ننفذ الشيفرتين في بداية و نهاية جزء التحريك)

/*
 في بداية التحريك
*/

$('html, body').css({
    'overflow': 'hidden',
    'height': '100%'
})

/*
ثم نعيدها لما كانت عليه
*/

$('html, body').css({
    'overflow': 'auto',
    'height': 'auto'
})

Adnane Kadri · 1 سبتمبر 2022

يمكنك ايضا عن طريق الجافاسكربت جلب قيمتي الازاحتين: الأفقية والعمودية للصفحة او الوثيقة. ثم الاستماع الى الحدث onscroll لإعادة المستخدم الى هاتين الازاحتين كل مرة يتم فيها محاولة عمل تمرير. يعني هذا: منع المستخدم من التمرير.

يكون ذلك كـ:

// جلب الازاحتين الافقية والعمودية لصفحة الويب
let TopScroll = window.pageYOffset || document.documentElement.scrollTop;
let LeftScroll = window.pageXOffset || document.documentElement.scrollLeft,

// اعادة المستخدم الى الموضع المحدد بهاتين الازاحتين
window.onscroll = function() {
     window.scrollTo(LeftScroll, TopScroll);
};

فهم الأحداث في جافاسكربت

Ahmed Sadek Elamine Touahria · 2 سبتمبر 2022

تعطيل التمرير على صفحة ويب :
يمكن بسهولة تعطيل التمرير على صفحات الويب باستخدام JavaScript من خلال طرق مختلفة ، لكن سنرى طريقتين فقط لتعطيله وهما مدرجتان أدناه:

الطريقة الأولى: عن طريق عمل override لدالة window.onscroll وهي دالة موجودة في الجافاسكريبت
الطريقة الثانية: عن طريق ضبط ارتفاع body على 100٪ و overflow على hidden

الطريقة الأولى:

functiondisable() {
// لجلب احداثيات التمرير في نقطة معينة
TopScroll = window.pageYOffset || document.documentElement.scrollTop;
LeftScroll = window.pageXOffset || document.documentElement.scrollLeft,

// إذا حدث التمرير ، فاضبطه على القيمة السابقة
window.onscroll = function() {
window.scrollTo(LeftScroll, TopScroll);
        };
}

functionenable() {
window.onscroll = function() {};
}

2. الطريقة الثانية : معتمدة على css تقريبا

<html>

<head>

<style>

.scrollable-place {

height: 3000px;

}

.stop-scrolling {

height: 100%;

overflow: hidden;

}

</style>

</head>

<body>
<h1 style="color: blue">مرحبا بك في أكادمية حسوب</h1>

<p>إضغط على الزر أدناه لتعطيل خاصية التمرير</p>

<p class="scrollable-place">
<button>تعطيل</button>
</p>

</body>

</html>

كيفية تعطيل ميزة التمرير Scroll في الصفحة عبر JavaScript؟

السؤال

Emad Saif

رابط هذا التعليق

شارك على الشبكات الإجتماعية

3 أجوبة على هذا السؤال

Recommended Posts

Wael Aljamal

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Adnane Kadri

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Ahmed Sadek Elamine Touahria

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية