Как загрузить элемент div при прокрутке вниз

Question

Как загрузить элемент div при прокрутке вниз

0

Я хочу загрузить контент во всех <div class='display' id='maskolis'> (там более одного), когда пользователь прокручивает вниз до него

Это javascript, над которым я работал: -

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

$(document).ready(function () {
    $(document).on('scroll', function () {
        $('.display').each(function () {
            if (isScrolledIntoView($(this))) {
                $(this).removeClass('display').fadeIn();
            }
        });
    });
});

Для всего скрипта перейдите по адресу http://goo.gl/FYQ2ga

Я попытался удалить display класса на свитке, у которого есть css- display:none.

Но я хочу, чтобы контент действительно загружался на прокрутке только для того, чтобы сделать загрузку гладкой.

Android Appania 04 янв. 2014, в 09:57

Источник

0

Так вы пытаетесь сделать бесконечный свиток? (иначе загрузка контента через AJAX)
drip 04 янв. 2014, в 08:32
0

@drip Я хочу загрузить каждый элемент <div class='display' id='maskolis'> при прокрутке. Перейдите на androidappania.com, чтобы увидеть контент под заголовком «Исследовать все приложения - по категориям» (я хочу загрузить этот контент при прокрутке вниз)
Android Appania 04 янв. 2014, в 08:39
0

Старайтесь не использовать один и тот же id в нескольких элементах, что может привести к проблемам в некоторых браузерах.
Alex Siri 04 янв. 2014, в 08:43
0

Из вашего jsfiddle я не вижу элементов, отображаемых с помощью class = "display"
Milche Patern 04 янв. 2014, в 09:08

Показать ещё 2 комментария

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

Так вы пытаетесь сделать бесконечный свиток? (иначе загрузка контента через AJAX)
@drip Я хочу загрузить каждый элемент <div class='display' id='maskolis'> при прокрутке. Перейдите на androidappania.com, чтобы увидеть контент под заголовком «Исследовать все приложения - по категориям» (я хочу загрузить этот контент при прокрутке вниз)
Старайтесь не использовать один и тот же id в нескольких элементах, что может привести к проблемам в некоторых браузерах.
Из вашего jsfiddle я не вижу элементов, отображаемых с помощью class = "display"

Alex Siri · Answer 1 · 2014-01-04T06-46-00.000Z

Хорошо, поэтому вместо того, чтобы

$(this).removeClass('display').fadeIn();

вы должны загружать контент, делать что-то вроде

$self = $(this);
$self.load(url, function(){
    $self.removeClass('display').fadeIn();
});

Видите, это не работает. (Перейдите на jsfiddle.net/AndroidAppania/7DKzM/6 )
Извините, я имел в виду url как фактический URL контента, который вы хотите загрузить, вам нужно поместить строку с URL в эту переменную.