Question

我想滚动使桌面，移动设备以及ipad和HD设备也能正常工作。为了激发功能，我所做的就是在页面中，我有一个名为mainContent的潜水标签。我正在使用淘汰赛向div标签添加更多文本。的默认行为浏览器是内容溢出时，垂直滚动回出现。当滚动条被下拉时，我编写了一个函数在div标签中添加更多文本。我已经在Codepen中放入了相同的代码，但是无法使其正常工作，所以我在下面放入了相同的代码

问题1.移动设备，当我触摸移动设备并向下滑动时，我无法调用该功能，并且我无法在div标签中加载更多文本。即使滚动条可访问，我也看不到结果。

问题2。当将HD分辨率的浏览器大小百分比设置为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

Answer 1

问题1 ：根据您在CodePen中的示例，要读取/更改div的内容，您需要使用text（）或html（）方法，而不是val（）。目前，您的代码甚至无法在桌面上运行。

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

在移动设备，ipad pro和ipad等多种设备上按需加载

1 个答案: