Question

我正在写一本在线图书阅读器。平均书籍有270个不同的页面。我希望用户能够浏览页面，但如果所有页面都被立即加载，那么页面会冻结，因为内容太多。为了解决这个问题，我认为最好的解决方案是每个网页的内容都以display:none开头，并且在视图中时只会变为display:block。

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

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

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>

这实际上似乎根本不起作用。我希望每个页面在视口（其任何部分）中变为display:block，并且当它完全位于视口之外时变为display:none。

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

Answer 1

http://jscroll.com/可以为你做这个工作吗？他们在主页上给出的示例与您想要的非常相似。

Answer 2

这里有一个很好的例子，可以在视口中选择项目：

How to get on-screen visible element objects in jQuery?

基本上你要做的是默认隐藏所有面板，除了页面加载时视口中可见的内容，使用该链接中的指令，然后可以将活动类附加到视口中的元素当你向下滚动页面并向它们添加display：block时。

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

Answer 3

滚动显示在窗口上而不是“bookzone”div上。

您需要在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>

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

Answer 4

我明白了。

<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 个答案: