按需按需在Mobile和iPad Pro和iPad等多个设备上加载

我想滚动在台式机，移动和iPad和HD设备上工作。为了刺激我所做的功能，是在一个页面中，我的DIV标签称为Main -content。我正在使用淘汰赛向Div标签添加更多文本。

浏览器的默认行为是，出现了内容，垂直滚动返回出现。拉下滚动条时，我写了一个函数，以在DIV标签中添加更多文本。我已经在Codepen中放了同样的内容，但无法使其正常工作，所以我在下面放了相同的代码

问题1.移动设备，当我触摸移动设备并滑下时，我将无法获取该功能，我无法在DIV标签中加载更多文本。即使可见滚动条，我看不到结果。

问题2.当浏览器尺寸百分比设置为高清分辨率的67％时，我没有得到滚动条，因为我没有滚动栏，我无法添加更多文本元素。

期望。我希望按需加载内容。它可以通过我正在处理的滚动条。如果有更好的方法也请建议。

 <!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 ：基于您在Codepen中的示例，要读取/更改DIV的内容，您需要使用text((或html((方法，不是val((。目前，您的代码甚至在桌面上都无法使用。

问题2 ：您可能应该在#MainContent中加载足够的内容，直到您看到滚动条为止...不幸的是，很难确定设备中文本所占据的空间，因为它取决于它许多因素(分辨率，窗口大小，格式等(。

相关内容

最新更新

热门标签：