JQuery'ni pastga sakrab o'tishni oldini olish (fadeyni ishlatganda)

JQuery bilan ba'zi div'llarni yaratib yuborganman, lekin foydalanuvchining biroz pastga o'tsa muammosi bor. Agar siz sahifaning yuqori qismida bo'lmasangiz, u yangi div ochilib qolganda doimo pastga sakraydi.

Mana mening kodim:

<div id="overflowwrap">
   <div id="five" style="display: none;">a lot of content</div>
   <div id="four" style="display: none;">a lot of content</div>
   <div id="three" style="display: none;">a lot of content</div>
   <div id="two" style="display: none;">a lot of content</div>
   <div id="one" style="display: none;">a lot of content</div>
</div>

<script>
$('#overflowwrap').css('max-height',$(window).height());

$("#one").fadeIn(500);
setTimeout( function show() {
   $("#two").fadeIn(500);
}, 3000);
setTimeout( function show() {
   $("#three").fadeIn(500);
}, 6000);
setTimeout( function show() {
   $("#four").fadeIn(500);
}, 9000);
setTimeout( function show() {
   $("#five").fadeIn(500);
}, 12000);
</script>

Update: Example fiddle: https://jsfiddle.net/6qj1hbp0/1/

Agar bu sahifadagi yagona element bo'lsa va foydalanuvchi aylantira olmasa, bu muammo bo'lmaydi. Biroq, u boshqa saytga (tadqiqot dasturlari) integratsiyalangan, shuning uchun foydalanuvchi o'tishga qodir.

Saytning pastga sakrashiga yo'l qo'ymaslik uchun nima qila olaman?

6
@Jakob Xromda hech qanday sakrashni ko'rmayapman.
qo'shib qo'ydi muallif Michael Coker, manba
@Jakob oldingi div'lar yangi fadeIn() da yashirin bo'lishi uchun kerakmi yoki ularni yangi qo'shilgan div-ga o'zgartirishni ilib qo'yish kerakmi?
qo'shib qo'ydi muallif user7417866, manba
Men Chrome va skripkadan foydalanmayapman.
qo'shib qo'ydi muallif Roy, manba
function show() { funktsiyasini faqat function() { bilan almashtiraman. Ushbu funktsiyaga nom qo'yishning hojati yo'q, ehtimol bu muammoga olib kelishi mumkinmi? Agar yo'q bo'lsa, muammoingizni JSfiddle, Codepen yoki siz tanlagan boshqa biron-biringizda qayta-qayta yaratib bera olasizmi?
qo'shib qo'ydi muallif pablito.aven, manba
Boshqa tomondan, juda setTimeout s o'rniga fadeIn qayta qo'ng'iroq qilish funktsiyasidan foydalanmoqchiman. Misol: $ ('# one') fadeIn (500, funktsiya() {$ ('# ikkita') fadeIn (500, function() {// etc //})
qo'shib qo'ydi muallif pablito.aven, manba
tarkibi 3 tugmaguncha kutib turing, keyin esa keyingi kontentni o'chirib ko'rsatsangiz, biroz pastga aylaning. Men bir necha marta sinab ko'rishim kerak edi, lekin bir necha marta sodir bo'lganini ko'rdim
qo'shib qo'ydi muallif pablito.aven, manba
@Jakob Men bu savol uchun sovrinni ochganman, iltimos, javobingizning muammoni hal qila olmasligini tasdiqlang, shunda unga ne'matni beraman.
qo'shib qo'ydi muallif pablito.aven, manba
Sizga shunga o'xshash biror narsa kerak bo'lishi mumkin: stackoverflow. MAQOMOTI/savollar/5688362/& hellip; va jQuery oynani buyurtma qilayotganda aylantirish holatini o'zgartirishdan saqlash "> stackoverflow.com/questions/9834143/… ?
qo'shib qo'ydi muallif Tarwirdur Turon, manba
"Ko'p tarkibli 3" -dan so'ng, pastga aylansangiz, ta'sirni ko'rasiz: jsfiddle.net/jakob_o/Ldjtnx2w/1

Aslida, faqatgina

Google Chrome brauzeridan sakrab chiqayotganini payqadim. Firefox va IE yaxshi ishlaydi. Buni Chrome brauzerida qanday tuzatishni bilib olasizmi?
qo'shib qo'ydi muallif Jakob, manba
BTW: Replace "funktsiyasi show() {" yordam bermadi. @ pablito.aven
qo'shib qo'ydi muallif Jakob, manba
Rahmat @ pablito.aven. Muammoni bartaraf etgan yechim bilan yangi javob yubordim. Boshqa barcha javoblar StackOverflow-da bu funksiyani o'zgartirishni talab qiladi.
qo'shib qo'ydi muallif Jakob, manba

6 javoblar

Turli xil munosabatni ko'ring.

Instead, of display: none on every element, try opacity: 0;

Keyin o'rniga:

setTimeout( function show() {
    $("#two").fadeIn(500);
    }, 5000);

foydalanish:

setTimeout( function show() {
    $("#two").addClass('is-visible);
}, 5000);

va qo'shing:

.is-visible { opacity: 1 !important; }

within your

tags.
3
qo'shib qo'ydi

aylantirishni "muzlatish" mumkin emas, lekin siz jQuery dan foydalanayotganligingiz sababli aylantirish joyini o'qishingiz va o'zgartirishingiz mumkin.

Mening halim fadeIn yo'riqnomasidan oldin darhol joriy joyni saqlab, shu funksiya bilan bir xil qiymatni darhol tayinlashdan iborat:

function fadeInElement(id, time) {
  var currentScroll = $(window).scrollTop();
  $('#' + id).fadeIn(time);
  $(window).scrollTop(currentScroll);
}

Keyin bir xil funktsiyani bir necha marta turli identifikatorlar va muddat bilan chaqirishingiz mumkin.

fadeInElement('one', 500);

yoki bu:

setTimeout(function() {
    fadeInElement('two', 500);
}, 5000);

You may look a working example on CodePen or on JSFiddle

1
qo'shib qo'ydi
Bu javob javob muallifi boshqa forumda topilgani kabi bir xil tushunchadir. Xayr-ehson qiling, yaxshi odam!
qo'shib qo'ydi muallif pablito.aven, manba

Muxtasar qilib aytganda, siz eng oson ishni qilsangiz, avvalgi divni yangi ko'rsatganingizda yashiring.

https://jsfiddle.net/6qj1hbp0/2/

$("#one").fadeIn(500);
setTimeout( function() {
  $("#one").hide();
  $("#two").fadeIn(500);
}, 3000);
setTimeout( function() {
  $("#two").hide();
  $("#three").fadeIn(500);
}, 6000);
setTimeout( function() {
  $("#three").hide();
  $("#four").fadeIn(500);
}, 9000);
setTimeout( function() {
  $("#four").hide();
  $("#five").fadeIn(500);
}, 12000);

Agar siz bir qutidan boshqasiga o'tmoqchi bo'lsangiz (bu juda ham ta'sirchan ko'rinish hosil qiladi), siz boshqa narsalarni qilishingiz kerak - eng muhimi:

  • qutilarini yuqoridan pastga, #one to #fivega qo'ying (buni har qanday qilish kerak - bu faqatgina mantiqiydir)
  • qutilarning har biri uchun pozitsiyani aniqlaydi
  • boshqa uslublarni o'rnating (quyidagi fiddlega qarang)
  • Agar quti o'cha turib, maxsus kursdan foydalaning

https://jsfiddle.net/6qj1hbp0/3/

0
qo'shib qo'ydi

Bu oddiy. Faqatgina "besh, to'rt, uch, ikkitadan birini" o'rniga ko'rsatmoqchi bo'lgan buyrug'ingizga ko'ra divni qayta tartibga soling. Sizning brauzeringiz sizni pastga tushirish niyatiga ega emas, faqat hozirgi karma sayohatchiligida nuqtai nazaringizni saqlab qolishga harakat qilmoqda. Suzib ketuvchi div har doim yuqorida turganidek, scrollTop faqat pastga sakraydi.

Boshqa bir yechim - agar siz buyurtma berishni xohlamasangiz - barcha div idlarini olib tashlash va ularni tanib olishning boshqa usulini yaratish, "ma'lumotlar-id" kabi bir narsa.

PS: ba'zi idlarni ham qidirib ko'ring!

0
qo'shib qo'ydi
  1. Do you need to restrict the overflow with hidden?

    You can just set overflow: auto and browser will automatically take care of ensuring scrollTop remains the same after the fade in. The element user is looking at after scroll will remain at the same offset. If user hasn't scrolled then it will show the latest faded element at the top

    Here's a jsfiddle: https://jsfiddle.net/sm2qaa3c/2/

    enter image description here

  2. After re-reading your comment, it seems you always want to display the latest faded div at the top. In that case you want a function to reset scrollTop to 0. You want to do it on overflowwrap not window since that's where the overflow scrolling will happen.

    ['#one', '#two', '#three', '#four', '#five'].forEach((id, idx) => {
        setTimeout(() => {
            $(id).fadeIn(500);
            $('#overflowwrap').scrollTop(0);
        }, idx * 5000);
    });
    

    enter image description here

See jsfiddle: https://jsfiddle.net/sm2qaa3c/3/

0
qo'shib qo'ydi

Javoblaringiz uchun tashakkur, ular mening maqsadim uchun ishlamadilar.

Biroq, boshqa funksionallikdan foydalanishim kerak, bu funksiyani o'zgartirishni talab qilmaydi. Bu shunday ishlaydi:

$('#overflowwrap').css('max-height', $(window).height());
fadeIn("#one", 0)
fadeIn("#two", 5000)
fadeIn("#three", 10000)
fadeIn("#four", 15000)
fadeIn("#five", 20000)

function cs() {
console.log(document.scrollingElement.scrollTop)
}
document.scrollingElement.scrollTop = 16

function fadeIn(el, when) {
setTimeout(function show() {
var t=document.scrollingElement.scrollTop
$(el).fadeIn(500);
document.scrollingElement.scrollTop = t
}, when);

}

Here is a working example on JSFiddle: https://jsfiddle.net/6qj1hbp0/4/

0
qo'shib qo'ydi
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb