لا أعرف ما إذا كنت قد واجهت مثل هذا الشرط: أضف عنصر طفل جديد إلى عنصر dom ، ثم تطلب أنه إذا تجاوز العنصر الجديد المضافة حديثًا نطاق الحاوية ، نحتاج إلى التمرير تلقائيًا إلى موضع عنصر الطفل المضافة حديثًا ، كما هو موضح في الشكل التالي:
بعد ذلك ، أثناء تعلم بعض نقاط المعرفة المتعلقة بالتمرير dom Element ، يمكننا أن ندرك تأثير الصورة أعلاه وبعض الوظائف الأخرى المتعلقة بالتمرير.
خصائص DOM وطرقها التي يجب فهمها
سمة scrollTop هي الفرق بين القيمة العليا لمحتوى عنصر الحاوية والقيمة top لقيمة أعلى في مُعلى عرض viewport العليا ، أي جزء الحاوية التي تنزلق لأعلى إلى ما وراء منفذ عرض الحاوية. يمكن التحكم في حالة التمرير عن طريق تعديل هذه الخاصية.
clientHeight هي سمة dom التي تصف ارتفاع الحاوية.
scrollHeight هي سمة dom التي تصف ارتفاع محتوى الحاوية.
يظهر العلاقة بين السمات الثلاث في الشكل أدناه:
getBoundingClientRect ()
يتم استخدام هذه الطريقة للحصول على بعض الخصائص الهندسية المطلوبة لتخطيط العناصر ، مثل left ، right ، top ، bottom ، height ، width ، إلخ.
Srollby (x ، y)
يمكن استخدام طريقة scrollTo لحاوية dom للتحكم مباشرة في المسافة المحددة لتمرير شريط التمرير. هذه الطريقة أكثر ملاءمة عندما تحتاج إلى التمرير إلى العنصر المحدد.
Srollto (x ، y)
يمكن استخدام طريقة scrollTo لحاوية dom للتحكم مباشرة في شريط التمرير للتمرير إلى الموضع المحدد. تكون هذه الطريقة أكثر ملاءمة عند التحكم في شريط التمرير للتمرير إلى الأعلى أو الأسفل.
تنفيذ تحضير التحكم في المتداول
دعونا نعد html أولاً
<! doctype html> <html> <head> <title> شرح مفصل لإعدادات شريط التمرير </title> <style> #scroll_container {height: 500px ؛ العرض: 500 بكسل ؛ فائض y: التمرير ؛ الحشو: 50 بكسل ؛ حجم الصناديق: صندوق الحدود ؛ } .scroll_item {height: 200px ؛ العرض: 500 بكسل ؛ الهامش: 20 بكسل ؛ خلفية اللون: أكوامارين. العرض: فليكس. محاذاة عناصر: المركز ؛ تبرير المحتوى: المركز ؛ } </style> </head> <body> <div id = scroll_container> <div id = scroll_container> <div id = item1 class = scroll_item> <span> 1 </span> </div> <div id = item2 class = scroll_item> <span> </span> </div id =/span> <s scrolle> id = item4 class = scroll_item> <span> 4 </span> </viv> <div id = item5 class = scroll_item> <span> 5 </span> </viv> </viv> <button onClick = AddItem ()> إضافة عنصر </button> </div> </body> دع الفهرس = 5 ؛ // إضافة وظيفة العنصر additem () {index+= 1 ؛ دع العنصر = `<div id = $ {'item'+index} class = scroll_item> <span> $ {index} </span> </viv>` ؛ container.innerhtml+= item ؛ setTimeOut (() => {scrollToIndex () ؛})} </script> </html>يحتوي الرمز أعلاه على منطقة قابلة للتمرير ، ويمكنه إضافة عناصر إلى منطقة التمرير ، أو التمرير إلى موضع العنصر المحدد. التأثير العام على النحو التالي.
التنفيذ الأساسي
تم شرح معنى scrollTop من قبل. يمكننا التحكم في التمرير عن طريق تعديل قيمة scrollTop لعنصر الحاوية scrolltop. كلما زادت قيمة scrollTop ، زادت مسافة التمرير من شريط التمرير بالنسبة للحالة الأصلية (عندما يكون scrollTop 0).
بعد فهم معنى scrollTop ، يمكننا استخدام scrollTop لتنفيذ التحكم في شريط التمرير. ثم نقوم أولاً بتنفيذ التمرير إلى الأسفل ونضيف طريقة scrollToBottom() إلى الكود أعلاه:
دالة scrolltobottom () {Let y = Container.Scrollheight-container.clientheight ؛ حاوية. scrolltop = y ؛} إذا كنت ترغب في التمرير إلى الأعلى ، فنحن بحاجة فقط إلى ضبط scrollTop على 0:
وظيفة scrolltotop () {container.scrolltop = 0 ؛} الجمع بين طريقة getBoundingClientRect() ، يمكننا أيضًا تنفيذ التمرير إلى العنصر المحدد ، حيث يمثل getBoundingClientRect().top المسافة من الجزء العلوي من العنصر الطفل إلى الجزء العلوي من عرض العنصر الأصل:
وظيفة التمرير (EL) {container.scrolltop+= el.getBoundingClientRect (). TOP ؛} إضافة الرسوم المتحركةقم بالتمرير إلى الأسفل
ومع ذلك ، فإن تمرير الكود أعلاه قاسي للغاية. يمكننا إضافة تأثير الرسوم المتحركة إليها ، والتي يمكن تنفيذها بمساعدة setInterval() . تحليل عملية تنفيذ آثار الرسوم المتحركة. إن تنفيذ الرسوم المتحركة ليس أكثر من إكمال تغيير المتغير خلال فترة زمنية معينة. لذلك ، نحتاج أولاً إلى معرفة إزاحة متغيرين ، المتغير ( scrollTop ) والوقت اللازم للتغيير. الإزاحة هي القيمة النهائية لـ scrollTop ناقص القيمة الأصلية ، ويتم تعيين مدة التغيير عمومًا على معلمة يمكن تعديلها. بعد فهم العملية أعلاه ، دعنا ننتقل أولاً إلى القاع كمثال:
// أولاً اكتب وظيفة scrolltobottom وظيفة scrolltobottom (el) {if (! el) {el = container ؛ } // القيمة الأصلية Let STARTTOP = EL.SCROLLTOP ؛ // القيمة النهائية دع endtop = el.scrollheight-el.clientheight ؛ // إنشاء وظيفة التحكم في الرسوم المتحركة ، دع scrollanimationfn = doanimation (startTop ، endtop ، 300 ، el) ؛ . null */function doanimation (startvalue ، endvalue ، المدة ، el) {// استخدم الإغلاق لحفظ المتغيرات وخطوة (مسافة كل تمرير الرسوم المتحركة) دع dy = 0 ؛ دع الخطوة = (endvalue-startvalue)/(المدة/10) ؛ // إرجاع وظيفة التحكم في الرسوم المتحركة (الفاصل الزمني) {dy+= الخطوة ؛ if (dy> = endvalue-startvalue) {clearinterval (الفاصل الزمني) ؛ } el.scrolltop+= الخطوة ؛ }}قم بتعديل وظيفة AddItem لإضافة التمرير إلى الرسوم المتحركة السفلية:
دالة additem () {index+= 1 ؛ دع العنصر = `<div id = $ {'item'+index} class = scroll_item> <span> $ {index} </span> </viv>` ؛ container.innerhtml+= item ؛ setTimeOut (() => {// scrolltoindex () ؛ scrolltobottom (حاوية) ؛})}ثم أضف التمرير إلى الزر السفلي لـ HTML:
<button onClick = ScrollTobottom ()> التمرير إلى أسفل </button>
باتباع الطريقة المذكورة أعلاه ، يمكنك أيضًا تطبيق رسوم متحركة شائعة الاستخدام للتمرير إلى الأعلى:
// كتابة وظيفة scrolltotop وظيفة scrolltotop (el) {if (! el) {el = container ؛ } // القيمة الأصلية Let STARTTOP = EL.SCROLLTOP ؛ // القيمة النهائية دع endtop = 0 ؛ // إنشاء وظيفة التحكم في الرسوم المتحركة ، دع scrollanimationfn = doanimation (startTop ، endtop ، 300 ، el) ؛ . من أجل التكيف مع التمرير إلى الأسفل ، نحتاج إلى تعديل توقيت توقف الرسوم المتحركة. وظيفة doAnimation() المعدلة هي كما يلي:
دالة doanimation (startvalue ، endvalue ، المدة ، el) {// استخدم الإغلاق لحفظ المتغيرات dy والخطوة (مسافة كل تمرير الرسوم المتحركة) دع dy = 0 ؛ دع الخطوة = (endvalue-startvalue)/(المدة/10) ؛ وظيفة الإرجاع (الفاصل الزمني) {dy+= الخطوة ؛ // هنا يتم تغييره لاستخدام القيمة المطلقة للحكم على (Math.ABS (dy)> = Math.ABS (endvalue-startvalue)) {clearinterval (الفاصل الزمني) ؛ } el.scrolltop+= الخطوة ؛ }} أخيرًا ، نضيف تمريرًا إلى الزر السفلي html :
<button onClick = scrolltotop ()> التمرير إلى الأعلى </button>
التأثير على النحو التالي:
أضف أولاً الأزرار المطلوبة وصناديق الإدخال لعنصر HTML:
<type type = number extral = الرجاء إدخال العنصر المراد تمريره إلى الفهرس النمط = العرض: 200px ؛/> <button onClick = scrollToElement ()> التمرير إلى العنصر المحدد <//زر>
أضف وظيفة تنفيذ الرسوم المتحركة تقوم بتمرير العنصر المحدد:
وظيفة scrolltoElement (حاوية ، el) {if (! containerel) {// parent element containerel = container ؛ } if (! el) {// احصل على العنصر المراد تمريره للسماح للإدخال = document.getElementsByTagName ('input') [0] ؛ دع id = 'item'+input.value ؛ if (! input.value) {id = 'item'+index ؛ } el = document.getElementById (id) ؛ } Let STARTTOP = CONUTEREL.SCROLLTOP ؛ دع endtop = startTop+el.getBoundingClientRect (). TOP ؛ دع scrollanimationfn = doanimation (startTop ، endtop ، 300 ، حاوية) ؛ دع الفاصل الزمني = setInterval (() => {scrollanimationfn (الفاصل الزمني)} ، 10)}التأثير على النحو التالي:
طريقة استخدام scrollTo(x,y) هي في الأساس نفس طريقة استخدام سمة scrollTop . يمكن أن تتحكم طريقة scrollTo() للعنصر الأصل في شريط التمرير إلى موضع محدد ، وهو ما يعادل في الواقع تعيين قيمة scrollTop . دعني أعطيك مثالاً:
// هنا نأخذ تمرير Y-axis كعنصر مثال.
لذلك ، فإن استخدام طريقة scrollTo() للتحكم في شريط التمرير هو نفسه استخدام ScrollTop. نحتاج فقط إلى تعديل وظيفة doAnimation() ، والرمز كما يلي:
دالة doanimation (startvalue ، endvalue ، المدة ، el) {// استخدم الإغلاق لحفظ المتغيرات dy والخطوة (مسافة كل تمرير الرسوم المتحركة) دع dy = 0 ؛ دع الخطوة = (endvalue-startvalue)/(المدة/10) ؛ وظيفة الإرجاع (الفاصل الزمني) {dy+= الخطوة ؛ if (math.abs (dy)> = math.abs (endvalue-startvalue)) {clearinterval (الفاصل الزمني) ؛ } //el.scrolltop+=step؛//ite تم تعديل سطر الكود إلى EL.Scrollto التالي (0 ، el.scrolltop+step) ؛ }} يتسق تأثير التنفيذ مع التنفيذ باستخدام scrollTop .
التنفيذ الأساسي
يمكننا أيضًا استخدام scrollBy(x,y) للتحكم في شريط التمرير. كما ذكر أعلاه ، تتمثل طريقة scrollBy() في التحكم في المسافة المحددة لبرنامج التمرير (لاحظ أنها ليست الموضع). استخدم Scrollby () لتنفيذ متطلبات التمرير إلى العناصر المحددة بسهولة. الرمز كما يلي:
وظيفة التمرير (حاوية ، EL) {// لأن getBoundingClientRect (). الأعلى هو المسافة من أعلى العنصر الطفل إلى أعلى العنصر الأصل ، لذلك هذه القيمة هي إزاحة العنصر الطفل بالنسبة للعنصر الأصل. نقوم بتمرير هذه القيمة إلى Scrollby ، أي ، التمرير إلى حاوية العنصر المحدد.قم بالتمرير إلى الأسفل:
وظيفة scrolltobottom (حاوية) {دع dy = containerel.scrollheight-containerel.clientheight ؛ حاوية.انتقل إلى الأعلى
وظيفة scrolltotop (حاوية) {دع dy =-(containerel.scrollheight-containerel.clientheight) ؛ حاوية.إضافة الرسوم المتحركة
هنا نقوم بتعديل الوظيفة التي تم إنشاؤها بواسطة الرسوم المتحركة ، لأن معلمة scrollBy() هنا هي إزاحة المتغير ، لذلك نقوم بإجراء التعديلات التالية:
وظيفة scrolltobottom (حاوية) {if (! containerel) {containerel = container ؛ } // dy هو الإزاحة دع dy = containerel.scrollheight-containerel.clientheight ؛ دع scrollanimationfn = doanimation (dy ، 300 ، حاوية) ؛ دع الفاصل الزمني = setInterval (() => {scrollanimationfn (الفاصل الزمني)} ، 10)} وظيفة scrolltotop (containerel) {if (! containerel) {containerel = container ؛ } // dy هو الإزاحة دع dy =-(containerel.scrollheight-containerel.clientheight) ؛ دع scrollanimationfn = doanimation (dy ، 300 ، حاوية) ؛ دع الفاصل الزمني = setInterval (() => {scrollAnimationFn (الفاصل الزمني)} ، 10)} وظيفة scrolltoElement (حاوية ، el) {if (! containerel) {container = container ؛ } if (! el) {let input = document.getElementSbyTagName ('input') [0] ؛ دع id = 'item'+input.value ؛ if (! input.value) {id = 'item'+index ؛ } el = document.getElementById (id) ؛ } // dy هو الإزاحة دع dy = el.getBoundingClientRect (). دع scrollanimationfn = doanimation (dy ، 300 ، حاوية) ؛ دع الفاصل الزمني = setInterval (() => {scrollanimationfn (الفاصل الزمني)} ، 10)}/** * @description: * param {type} * @return: تم تنفيذه Let Step = dy/(المدة/10) ؛ وظيفة الإرجاع (الفاصل الزمني) {exe_dy+= الخطوة ؛ if (math.abs (exe_dy)> = math.abs (dy)) {clearinterval (الفاصل الزمني) ؛ } el.scrollby (0 ، خطوة) ؛ }} يتسق تأثير التنفيذ مع التنفيذ باستخدام scrollTop .
ما سبق: point_up_2: هو ملخصك التفصيلي وشرح التحكم في شريط التمرير DOM ، وكذلك بعض طرق الاستخدام الأساسية.
هذا هو المقالة حول التفسير التفصيلي لملخص التحكم في شريط التمرير في HTML في HTML. للحصول على محتوى Scroll Scroll Scroll Scroll الأكثر صلة ، يرجى البحث عن المقالات السابقة من Wulin.com أو متابعة تصفح المقالات ذات الصلة أدناه. آمل أن يدعم الجميع wulin.com في المستقبل!