Док сурфујете веб страницама, скроловање до елемента држи корисника усредсређеним тако што му привуче пажњу на дужи период. Ова функционалност се може применити када корисник треба да скролује само једним кликом или, у случају аутоматизованог тестирања, да одмах провери додат садржај на дну странице. У таквим сценаријима, померање до елемента у ЈаваСцрипт-у додаје функционалност која се примењује једним кликом без много интеракције корисника и штеди време.
Овај приручник ће вас водити да скролујете до елемента користећи ЈаваСцрипт.
Како да скролујете до елемента користећи ЈаваСцрипт?
Да бисте скроловали до елемента помоћу ЈаваСцрипт-а, можете да користите:
-
- “ сцроллИнтоВиев() ” метод
- “ свитак() ” метод
- “ сцроллТо() ” метод
Поменути приступи ће бити илустровани један по један!
Метод 1: Скролујте до елемента у ЈаваСцрипт-у помоћу методе сцроллИнтоВиев().
„ сцроллИнтоВиев() ” метода скролује елемент у видљиву област модела објекта документа (ДОМ). Овај метод се може применити да бисте добили наведени ХТМЛ и применили одређени метод на њега уз помоћ догађаја онцлицк.
Синтакса
елемент.сцроллИнтоВиев ( поравнајте )
У датој синтакси, „ поравнајте ” означава тип поравнања.
Пример
У следећем примеру додајте следећи наслов користећи „ <х2> ” ознака:
< х2 > Кликните на дугме да бисте дошли до елемента. х2 >
Сада креирајте дугме са „ онцлицк ” догађај који позива функцију “ сцроллЕлемент() :
< бр >
Након тога наведите извор слике и њен ИД да би се померали:
На крају, дефинишите функцију под називом „ сцроллЕлемент() ” који ће преузети тражени елемент користећи „ доцумент.гетЕлементБиИд() ” и примените метод сцроллИнтоВиев() на њега да бисте померали слику:
вар елемент = доцумент.гетЕлементБиИд ( 'див' ) ;
елемент.сцроллИнтоВиев ( ) ;
}
ЦСС код
У ЦСС коду, примените следеће димензије за подешавање величине слике позивајући се на ИД слике “ див ”:
#див{висина: 800пк;
ширина: 1200пк;
оверфлов: ауто;
}
Одговарајући излаз ће бити:
Метод 2: Скролујте до елемента у ЈаваСцрипт-у помоћу методе виндов.сцролл().
„ виндов.сцролл() ” метода скролује прозор према вредностима координата у документу. Овај метод се може применити за преузимање ИД-а слике, постављање њених координата помоћу функције и померање наведене слике.
Синтакса
прозор.сцролл ( к-коорда, и-коорда )
У горњој синтакси, „ к-цоорд “ се односи на Кс координате, а “ и-коорд ” означава И координате.
Следећи пример објашњава наведени концепт.
Пример
Поновите исте кораке да додате наслов, креирате дугме, примените онцлицк догађај и одредите извор слике са његовим ИД-ом:
< х2 > Кликните на дугме да бисте дошли до елемента. х2 >< дугме онцлицк = 'сцроллЕлемент()' > Сцролл Елемент дугме >
< бр >
< слика срц = 'имаге.ПНГ' ид = 'див' >
Затим дефинишите функцију под називом „ сцроллЕлемент() ”. Овде ћемо подесити координате помоћу „ виндов.сцролл() ” приступом функцији под називом “ позиција() ” и примењујући га на преузети елемент слике:
прозор.сцролл ( 0 , Поситион ( доцумент.гетЕлементБиИд ( 'див' ) ) ) ;
}
Након тога, дефинишите функцију под називом „ позиција() ” узимајући променљиву обј као аргумент. Такође, примените „ оффсетПарент ” својство, које ће приступити најближем претку који нема статичну позицију и вратити га. Затим повећајте иницијализовану тренутну горњу вредност уз помоћ „ оффсетТоп ” својство које ће вратити горњу позицију у односу на родитељ(оффсетПарент) и вратити вредност „ тренутни врх ” када је додати услов процењен као тачан:
где је струја врх = 0 ;
ако ( обј.оффсетПарент ) {
урадити {
цурренттоп += обј.оффсетТоп;
} док ( ( обј = обј.оффсетПарент ) ) ;
повратак [ цурренттоп ] ;
}
}
На крају, стилизујте креирани контејнер према вашим захтевима:
висина: 1000пк;
ширина: 1000пк;
оверфлов: ауто;
}
Излаз
Метод 3: Скролујте до елемента у ЈаваСцрипт-у помоћу методе сцроллТо().
„ сцроллТо() ” метода скролује наведени документ до додељених координата. Ова метода се на сличан начин може имплементирати да се елемент добије коришћењем његовог ИД-а и извођењем потребне функционалности за померање одређене слике на ДОМ-у.
Синтакса
виндов.сцроллТо ( к и и )
Овде, „ Икс ' и ' И ” указују на координате к и и.
Погледајте следећи пример.
Пример
Прво поновите горе наведене кораке за додавање наслова, дугмета са догађајем онцлицк и слике на следећи начин:
< х2 > Кликните на дугме да бисте дошли до елемента. х2 >< дугме онцлицк = 'сцроллЕлемент()' > Сцролл Елемент дугме >
< бр >
< имг срц = 'имаге.ЈПГ' ид = 'див' >
Затим дефинишите функцију под називом „ сцроллЕлемент() ” и подесите скрол позивањем методе Поситион() у методу сцроллТо():
виндов.сцроллТо ( 0 , Поситион ( доцумент.гетЕлементБиИд ( 'див' ) ) ) ;
}
На крају, дефинишите функцију под називом Поситион() и на сличан начин примените горе поменуте кораке за постављање координата наведене слике:
где је струја врх = 0 ;
ако ( обј.оффсетПарент ) {
урадити {
цурренттоп += обј.оффсетТоп;
} док ( ( обј = обј.оффсетПарент ) ) ;
повратак [ цурренттоп ] ;
}
}
Излаз
Разговарали смо о свим згодним методама за скроловање до елемента помоћу ЈаваСцрипт-а.
Закључак
Да бисте скроловали до елемента у ЈаваСцрипт-у, користите „ сцроллИнтоВиев() ” за приступ елементу и примену наведене функционалности, „ виндов.сцролл() ” да бисте преузели елемент, поставили његове координате помоћу функције и померали слику или употребили „ сцроллТо() ” да бисте преузели елемент и померили га у складу са тим. Овај блог је демонстрирао концепт скроловања до елемента помоћу ЈаваСцрипт-а.