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

Question

I'm writing an online book reader. 我正在写一个在线图书阅读器。 The average book has 270 distinct pages. 平均每本书有270个不同的页面。 I'd like the user to be able to browse through the pages but if all are loaded immediately then the page freezes as it's too much content. 我希望用户能够浏览页面，但是如果所有页面都立即加载，则页面会因为内容过多而冻结。 To fix this I think the best solution is that each page's content is display:none to begin with and only becomes display:block when in view. 为了解决这个问题，我认为最好的解决方案是每个页面的内容都是display:none开头，只有在查看时才变为display:block 。

Unfortunately I'm not very experienced with Javascript and so I'm having difficulty figuring out how to do this. 不幸的是，我对Javascript的经验不是很丰富，因此我很难弄清楚该如何做。

I'm using only raw Javascript (no JQuery). 我只使用原始Javascript（没有JQuery）。 So far I have this: 到目前为止，我有这个：

https://jsfiddle.net/ya2n8bfm/ https://jsfiddle.net/ya2n8bfm/

<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 class="bookzone" onscroll="scollPos();">
    <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>

That doesn't actually seem to work at all. 这实际上似乎根本不起作用。 I'd like that each page becomes display:block when it's in the viewport (any part of it) and becomes display:none when it's entirely outside of the viewport. 我希望每个页面在视口中（页面的任何部分）时都变成display:block ，而当它完全在视口之外时才变成display:none 。

So my two issues are: (1) what I've done so far doesn't seem to work at all, (2) I'm not sure how to make it know when an element is in the viewport. 因此，我有两个问题：（1）到目前为止，我所做的一切似乎都不起作用，（2）当某个元素位于视口中时，我不确定如何知道它。 I could do (2) based on a whole series of rules since every page is the same height, but perhaps there is a more efficient way? 我可以根据一系列规则来做（2），因为每个页面的高度都相同，但是也许有更有效的方法吗？

Answer 1

http://jscroll.com/ could do the job for you? http://jscroll.com/可以为您完成这项工作吗？ The example they give on the home page looks very similar to what you want. 他们在主页上给出的示例看起来与您想要的非常相似。

Answer 2

There's a good example of selecting items within a viewport here: 这里有一个在视口中选择项目的好例子：

How to get on-screen visible element objects in jQuery? 如何在jQuery中获得屏幕上可见的元素对象？

Basically what you'll want to do is hide all your panels by default apart from what is visible in the viewport when the page loads, using the instructions in that link you can then append an active class to the elements within the viewport as you scroll down the page and add display:block to them. 基本上，您要做的是默认情况下隐藏所有面板，而不是页面加载时在视口中可见的所有面板，使用该链接中的说明，您可以在滚动时将活动类附加到视口中的元素在页面下方添加display：block。

Keep in mind most solutions will actually load a few elements ahead to make the experience a bit better, I'm not sure if this demo does that or not. 请记住，大多数解决方案实际上会预先加载一些元素，以使体验更好一些，我不确定此演示是否做到这一点。

Answer 3

The scroll appears on the window and not on the "bookzone" div. 滚动条显示在窗口上，而不是在“ bookzone” div上。

You need to set a height/maximum-height on the bookzone div in order to have scroll on it. 您需要在bookzone div上设置高度/最大高度，以便在其上滚动。 You also need to add the "bookzone" id. 您还需要添加“ bookzone” ID。

This appears to work: 这似乎起作用：

<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>

But the best solution would be a "lazy loading"/"infinite scroll" solution. 但是最好的解决方案是“延迟加载” /“无限滚动”解决方案。 This will likely mean that you will need to use a library/plugin. 这可能意味着您将需要使用库/插件。

Answer 4

I figured it out. 我想到了。

<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>

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

问题描述

4 个解决方案

解决方案1
0 2015-11-09 10:26:44

解决方案2
0 2015-11-09 10:35:15

解决方案3
0 2015-11-09 11:17:40

解决方案4
0 2015-11-09 12:22:32

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

问题描述

4 个解决方案

解决方案1 0 2015-11-09 10:26:44

解决方案2 0 2015-11-09 10:35:15

解决方案3 0 2015-11-09 11:17:40

解决方案4 0 2015-11-09 12:22:32

解决方案1
0 2015-11-09 10:26:44

解决方案2
0 2015-11-09 10:35:15

解决方案3
0 2015-11-09 11:17:40

解决方案4
0 2015-11-09 12:22:32