اذهب إلى المحتوى
  • 0

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

Emad Saif

السؤال

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 1

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

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

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

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

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

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 1

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

يكون ذلك كـ:

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 1

 

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

  • الطريقة الأولى: عن طريق عمل override لدالة window.onscroll وهي دالة موجودة في الجافاسكريبت
  • الطريقة الثانية: عن طريق ضبط ارتفاع body على 100٪ و overflow  على hidden 
  1. الطريقة الأولى:
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>
رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...