HTML/Javascript：在视图中生成div显示块？_Javascript_Html_Css

HTML/Javascript：在视图中生成div显示块？

javascript html css

HTML/Javascript：在视图中生成div显示块？,javascript,html,css,Javascript,Html,Css,我正在写一本在线图书阅读器。一本书平均有270页。我希望用户能够浏览页面，但如果所有页面都立即加载，那么页面将冻结，因为内容太多。为了解决这个问题，我认为最好的解决方案是，每个页面的内容都是display:none，只有在查看时才变成display:block 不幸的是，我对Javascript不是很有经验，所以我很难弄清楚如何做到这一点我只使用原始Javascript（没有JQuery）。到目前为止，我有： .bookzone{margin:0；padding:0；overflow:sc

我正在写一本在线图书阅读器。一本书平均有270页。我希望用户能够浏览页面，但如果所有页面都立即加载，那么页面将冻结，因为内容太多。为了解决这个问题，我认为最好的解决方案是，每个页面的内容都是

display:none

，只有在查看时才变成

display:block

不幸的是，我对Javascript不是很有经验，所以我很难弄清楚如何做到这一点

我只使用原始Javascript（没有JQuery）。到目前为止，我有：


.bookzone{margin:0；padding:0；overflow:scroll；}
函数scollPos（）{
var sp=document.getElementById（“bookzone”）.scrollTop；
如果（sp>100）{
document.getElementById（“p2”）.style.display=“block”；
}
}
第1页
第2页
第3页
第4页
第5页
第6页
第7页
第8页
第9页
第10页
第11页
第12页

这似乎根本不起作用。我希望每个页面在视口（其任何部分）中时变为

display:block

，完全在视口之外时变为

display:none

所以我的两个问题是：（1）到目前为止我所做的似乎根本不起作用，（2）我不知道如何让它知道元素何时在视口中。我可以根据一系列规则来做（2），因为每一页都是相同的高度，但也许有更有效的方法吗？

可以帮你做这项工作吗？他们在主页上给出的示例与您想要的非常相似。

这里有一个在视口中选择项目的好示例：

基本上，您要做的是在默认情况下隐藏除加载页面时在视口中可见的面板之外的所有面板，然后使用该链接中的说明，您可以在向下滚动页面并向其添加display:block时将活动类附加到视口中的元素

请记住，大多数解决方案实际上会提前加载一些元素以使体验更好，我不确定此演示是否会这样做。

滚动显示在窗口上，而不是“bookzone”分区上

您需要在bookzone div上设置高度/最大高度，以便在其上滚动。您还需要添加“bookzone”id

这似乎有效：

<html>
<head>
<style>.bookzone { margin:0; padding:0; overflow:scroll; }</style>
<script>
    function scollPos() {
        var sp = document.getElementById("bookzone").scrollTop;
        if (sp > 100) {
            document.getElementById("p2").style.display = "block";
        }
    }
</script>
</head>
<body>
<div id="bookzone" class="bookzone" onscroll="scollPos();" style="max-height:400px">
    <div style="width:400;height:400;"><div id="p1" style="display:none;">Page 1</div></div>
    <div style="width:400;height:400;"><div id="p2" style="display:none;">Page 2</div></div>
    <div style="width:400;height:400;"><div id="p3" style="display:none;">Page 3</div></div>
    <div style="width:400;height:400;"><div id="p4" style="display:none;">Page 4</div></div>
    <div style="width:400;height:400;"><div id="p5" style="display:none;">Page 5</div></div>
    <div style="width:400;height:400;"><div id="p6" style="display:none;">Page 6</div></div>
    <div style="width:400;height:400;"><div id="p7" style="display:none;">Page 7</div></div>
    <div style="width:400;height:400;"><div id="p8" style="display:none;">Page 8</div></div>
    <div style="width:400;height:400;"><div id="p9" style="display:none;">Page 9</div></div>
    <div style="width:400;height:400;"><div id="p10" style="display:none;">Page 10</div></div>
    <div style="width:400;height:400;"><div id="p11" style="display:none;">Page 11</div></div>
    <div style="width:400;height:400;"><div id="p12" style="display:none;">Page 12</div></div>
</div>
</body></html>


.bookzone{margin:0；padding:0；overflow:scroll；}
函数scollPos（）{
var sp=document.getElementById（“bookzone”）.scrollTop；
如果（sp>100）{
document.getElementById（“p2”）.style.display=“block”；
}
}
第1页
第2页
第3页
第4页
第5页
第6页
第7页
第8页
第9页
第10页
第11页
第12页

但最好的解决方案是“延迟加载”/“无限滚动”解决方案。这可能意味着您需要使用一个库/插件。

我想出来了

<html>
<head>
<style>
.bookzone { margin:0; padding:0; overflow:scroll; }
.outOfView { display:none; }
.inView { display:block; }
</style>
</head>
<body>
<div id="bookzone" class="bookzone" style="max-height:400px">
    <div style="width:400px;height:400px;"><div id="p0" class="outOfView">Page 1</div></div>
    <div style="width:400px;height:400px;"><div id="p1" class="outOfView">Page 2</div></div>
    <div style="width:400px;height:400px;"><div id="p2" class="outOfView">Page 3</div></div>
    <div style="width:400px;height:400px;"><div id="p3" class="outOfView">Page 4</div></div>
    <div style="width:400px;height:400px;"><div id="p4" class="outOfView">Page 5</div></div>
    <div style="width:400px;height:400px;"><div id="p5" class="outOfView">Page 6</div></div>
    <div style="width:400px;height:400px;"><div id="p6" class="outOfView">Page 7</div></div>
    <div style="width:400px;height:400px;"><div id="p7" class="outOfView">Page 8</div></div>
    <div style="width:400px;height:400px;"><div id="p8" class="outOfView">Page 9</div></div>
    <div style="width:400px;height:400px;"><div id="p9" class="outOfView">Page 10</div></div>
    <div style="width:400px;height:400px;"><div id="p10" class="outOfView">Page 11</div></div>
    <div style="width:400px;height:400px;"><div id="p11" class="outOfView">Page 12</div></div>
</div>
<script>
var bz = document.getElementById('bookzone')
if (bz.addEventListener) {
    bz.addEventListener('scroll', scrollPage);
} else {
    bz.attachEvent("onscroll", scrollPage);
}
var vis, a, b;
function scrollPage() {
        vis = Math.floor(document.getElementById("bookzone").scrollTop / 400);
        if (a) { a.className = 'outOfView'; }
        if (b) { b.className = 'outOfView'; }
        a = document.getElementById('p' + vis)
        b = document.getElementById('p' + (vis + 1))
        a.className = 'inView';
        if (b) { b.className = 'inView'; }
    }
scrollPage();
</script>
</body></html>


.bookzone{margin:0；padding:0；overflow:scroll；}
.outOfView{显示：无；}
.inView{display:block；}
第1页
第2页
第3页
第4页
第5页
第6页
第7页
第8页
第9页
第10页
第11页
第12页
var bz=document.getElementById（'bookzone'））
if（bz.addEventListener）{
bz.addEventListener（'scroll'，scrollPage）；
}否则{
附件（“onscroll”，滚动页）；
}
var-vis，a，b；
函数scrollPage（）{
vis=数学楼层（document.getElementById（“bookzone”）.scrollTop/400）；
如果（a）{a.className='outOfView'；}
如果（b）{b.className='outOfView'；}
a=document.getElementById（'p'+vis）
b=document.getElementById（'p'+（vis+1））
a、 className='inView'；
如果（b）{b.className='inView'；}
}
滚动页面（）；

仍需加载隐藏元素。所以这个想法是错误的。相反，使用延迟加载技术。它是否被加载并不重要，只是它没有被渲染。问题在于渲染。我已经测试了页面加载，如果所有div都设置为

display:none

，那么它可以正常工作，没有冻结，尽管有超过100000行的HTML。此外，我非常确定，如果图像从

显示：none

开始，它们甚至不会被加载。此外，您还必须为

宽度

和

高度

属性指定度量单位。您有没有研究过Ajax？我有一种感觉，无论它是否隐藏，尽量避免一次性将其发送给客户机都是有益的。是的，我看过Ajax，但不管我是否使用它，这部分还是一样的。谢谢，但这不是一回事。我需要的东西有一个固定的整体大小，可以上下滚动而看不见的内容总是消失。我特别不使用JQuery，所以不幸的是这对我没有帮助。我不是想成为一个混蛋，但如果你已经在苦苦挣扎，试图用JS单独完成这项工作，而没有第三方库的帮助，你的日子会很不好过……我明白你的意思，但我更希望所有用户都能永远保持效率，而不是为我奋斗一天。@Alasdair仅仅因为你使用的是香草javascript并不意味着它会更高效，效率不仅仅是jQuery的开销，这取决于我如何编写它。如果可能的话，我更喜欢使用10行代码，而不是10000行。嗨，如果我将其保存为HTML并在它的Chrome中打开，我可以看到这是可行的，但它似乎不适用于JSFIDLE：知道为什么会这样吗？是的，似乎需要将“scollpos”函数添加到全局范围中才能工作：scrollPos=function（）{…}

<html>
<head>
<style>
.bookzone { margin:0; padding:0; overflow:scroll; }
.outOfView { display:none; }
.inView { display:block; }
</style>
</head>
<body>
<div id="bookzone" class="bookzone" style="max-height:400px">
    <div style="width:400px;height:400px;"><div id="p0" class="outOfView">Page 1</div></div>
    <div style="width:400px;height:400px;"><div id="p1" class="outOfView">Page 2</div></div>
    <div style="width:400px;height:400px;"><div id="p2" class="outOfView">Page 3</div></div>
    <div style="width:400px;height:400px;"><div id="p3" class="outOfView">Page 4</div></div>
    <div style="width:400px;height:400px;"><div id="p4" class="outOfView">Page 5</div></div>
    <div style="width:400px;height:400px;"><div id="p5" class="outOfView">Page 6</div></div>
    <div style="width:400px;height:400px;"><div id="p6" class="outOfView">Page 7</div></div>
    <div style="width:400px;height:400px;"><div id="p7" class="outOfView">Page 8</div></div>
    <div style="width:400px;height:400px;"><div id="p8" class="outOfView">Page 9</div></div>
    <div style="width:400px;height:400px;"><div id="p9" class="outOfView">Page 10</div></div>
    <div style="width:400px;height:400px;"><div id="p10" class="outOfView">Page 11</div></div>
    <div style="width:400px;height:400px;"><div id="p11" class="outOfView">Page 12</div></div>
</div>
<script>
var bz = document.getElementById('bookzone')
if (bz.addEventListener) {
    bz.addEventListener('scroll', scrollPage);
} else {
    bz.attachEvent("onscroll", scrollPage);
}
var vis, a, b;
function scrollPage() {
        vis = Math.floor(document.getElementById("bookzone").scrollTop / 400);
        if (a) { a.className = 'outOfView'; }
        if (b) { b.className = 'outOfView'; }
        a = document.getElementById('p' + vis)
        b = document.getElementById('p' + (vis + 1))
        a.className = 'inView';
        if (b) { b.className = 'inView'; }
    }
scrollPage();
</script>
</body></html>