Загрузка по требованию на нескольких устройствах, таких как мобильные и Ipad Pro и Ipad - PullRequest
Новая
       27

Загрузка по требованию на нескольких устройствах, таких как мобильные и Ipad Pro и Ipad

0 голосов
/ 28 июня 2019

Я хочу прокрутить заставку работать на настольном компьютере, мобильном устройстве, iPad и HD устройствах Чтобы стимулировать функциональность, то, что я сделал, это на странице у меня есть тег погружения под названием mainContent. Я использую нокаут, чтобы добавить больше текста в тег div. Поведение по умолчанию браузер в том, что содержимое переполнено, появляется вертикальная прокрутка назад. когда полоса прокрутки опущена, я пишу функцию добавить еще текст в тег div. Я поместил то же самое в codepen, но не смог заставить его работать, поэтому я поместил тот же код ниже

Проблема 1. Мобильные устройства: когда я касаюсь мобильного телефона и сползаю вниз, я не могу вызвать функцию и не могу загрузите больше текста в тег div. хотя полоса прокрутки открыта для просмотра, я не вижу результата.

Проблема 2. Когда процент размера браузера установлен на 67% для разрешения HD, я не получаю полосу прокрутки, так как я не получаю полосу прокрутки Я не могу добавить больше текстовых элементов.

Expectation. Я ожидаю загрузки содержимого по требованию. Это может быть через полосу прокрутки, над которой я работаю. Как бы то ни было, если есть лучший подход, пожалуйста, предложите. 

 <!doctype html>
<html lang="en">
<head>
<title>Test Page </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome"> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script> 
</head>
<body>
    <div id="maincontent">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
        text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
        It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
        and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>

</body>
</html>

<script type="javascript">
function TestModal() {

    var self = this;

    self.fetchNext = function () {
        var result = $('#maincontent').val();
        var nresult = result + 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.     It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.       It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,             and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.'
        $('#maincontent').val(nresult)
    }

}


$(document).ready(function () {

    var testModal = new TestModal();
    ko.applyBindings(testModal);


    $(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            testModal.fetchNext();
            alert('hdf');
        }
    });
});
</script>

https://codepen.io/jganesh/pen/jjYMbW

1 Ответ

0 голосов
/ 28 июня 2019

Проблема 1 : основываясь на вашем примере в CodePen, для чтения / изменения содержимого div вам нужно использовать методы text () или html (), а не val ().В настоящее время ваш код даже не работает на рабочем столе.

Проблема 2 : вам, вероятно, следует загружать достаточно содержимого в #maincontent, пока не увидите полосу прокрутки ... к сожалению, это трудно определитьпространство, занимаемое текстом в устройстве, поскольку оно зависит от многих факторов (разрешение, размер окна, форматирование и т. д.).

...