Հղման հղում՝ https://crazyripples.com/?debug=1
Այսպիսով, ես օգտագործում եմ jQuery և jQuery fullPage հավելվածը: Այն օգնում է ինձ հասնել շրջանակ առ կադր ոլորման:
Այժմ, ներքին div-ների համար, որտեղ ուղղահայաց բարձրությունը մեծ է պատուհանի բարձրությունից, ես օգտագործել եմ որոշ գործառույթներ, որտեղ ես պարզապես ստուգում եմ ոլորման գծի դիրքը և stop Propagation դեպի plugin, որպեսզի ներքին ոլորման տողը ոլորվի առանց շրջանակը տեղափոխելու:
Ամեն ինչ լավ է աշխատում քրոմի հետ, և քանի որ ես կառուցել եմ քրոմով, ես օգտագործել եմ որոշ հաշվարկներ, որոնք ես դիտարկել եմ քրոմի վրա: Սակայն firefox-ը տարբեր արդյունքներ է ցույց տալիս, հատկապես scrollTop-ով:
Ես տեղյակ եմ այն փաստի մասին, որ կարող է լինել բարձրության տարբերություն, բայց եթե դուք տեսնեք տեղեկամատյանները հղման հղումում, դուք կտեսնեք, բարձրությունը գրեթե նույնն է (նույնիսկ եթե դա ձեզ համար չէ, դա scrollTop արժեքն է. խնդիր).
Ահա այն կոդը, որը ես օգտագործում եմ՝ որոշելու՝ դադարեցնե՞լ տարածումը, թե՞ ոչ:
$(document).on("keydown",function(e){
var story=$("#story"),
story_con=story.find(".container"),
story_top=story_con.scrollTop();
if(story.hasClass("active")){
// console.log(story_top,story_con.height(),story_con.innerHeight(),story_con.children("div").height(),story_con.children("div").innerHeight(),e.which);
console.log("Div ScrollTop: "+story_top, "Container Height: "+story_con.height(), "Container InnerHeeight: "+story_con.innerHeight(),"Conatiner Div Height: "+story_con.children("div").height());
//up arrow
if(story_top==0 && e.which==38){
console.log("prev frame")
}
//down arrow
//chrome 280+432 >= 676 i.e. 712>=676 true
//firefox 207+429 >= 676 i.e 636>=676 false
else if(story_top + story_con.height() >=story_con.children("div").height() && e.which==40){
console.log("next frame");
}
else{
story_con.focus();
console.log(story_con[0]);
console.log("stopped propagation");
e.stopImmediatePropagation();
}
return;
}
});Եվ այսպես եմ կոչում plugin-ը.
$('#main').fullpage({
sectionSelector:'.frame',
scrollingSpeed:800,
responsiveWidth:1025,
normalScrollElements: '#story, #startups, #services',
});Կրկնօրինակում. Անցեք հղումի հղումին: Նավարկեք դեպի երկրորդ բաժին (Մեր պատմությունը) կամ ոլորելով, սլաքների ստեղներով կամ ընտրացանկով: Այժմ օգտագործեք միայն սլաքների ստեղները, շրջանակը պետք է նորմալ ոլորվի, բայց երբ ոլորումն ավարտվի, այն պետք է անցնի հաջորդ շրջանակին (դա անում է Chrome-ում): Լրացուցիչ մանրամասների համար տես js տեղեկամատյանները:
Ես կցանկանայի, եթե որևէ մեկը կարողանա օգնել ինձ ինչ-որ կերպ: Ես վաղուց փորձում էի սա վրիպազերծել: Միգուցե ես կենտրոնանում եմ սխալ հարցի վրա: Ցանկացած օգնություն կգնահատվի:
P.S. Ես գիտեմ, որ plugin-ն առաջարկում է scrollOverflow տարբերակ: Դա ավելի շատ խնդիրներ էր առաջացնում, քան այս մոտեցումը:
Թարմացում. Քանի որ ես չկարողացա այդքան կոնկրետ լուծում գտնել, ես փոխեցի իմ մոտեցումը՝ պարզելու, թե արդյոք շրջանակի ոլորման տողը հասել է իր ավարտին: Ես օգտագործել եմ սա.
//down arrow
else if(container[0].offsetHeight + container[0].scrollTop >= container[0].scrollHeight){
console.log("next frame");
}
