Question

我正在创建一个网站，我想在底部放置几个固定类型的链接。当您单击其中一个链接时，您可以将一张图片下移到该页面，然后转到下一张图片，依此类推。如果你向下滚动，你也可以看到那张照片。但我确实想摆脱滚动条。这意味着您可以在滚动时向下滚动，但无法确定您在该页面上的确切位置。

Answer 1

这就是我要做的事情：我会拥有一个包罗万象的HTML容器，然后根据您的用户事件相应地移动子内容。例如，onClick你的一个“固定类型”链接以及窗口的onScroll，你可以触发相同的事件。

HTML：

<div id="container">
    <div id="content1"></div>
    <div id="content2"></div>
    <div id="content3"></div>
    <div id="content4"></div>

    <div id="links">
        <a href="0" class="contentLink">link 1</a> | 
        <a href="1" class="contentLink">link 2</a> | 
        <a href="2" class="contentLink">link 3</a> | 
        <a href="3" class="contentLink">link 4</a>
    </div>
</div>

CSS：

#container, #content1, #content2, #content3, #content4 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    overflow: hidden;
    z-index: 1;
}
#content1 { top: 0%; background: green; }
#content2 { top: 100%; background: red; }
#content3 { top: 200%; background: orange; }
#content4 { top: 300%; background: purple; }

#links {
    position: absolute;
    bottom: 10px; left: 10px;
    z-index: 2;
}

JS：

$(function() {
    var currentPos = 0,
        scrollDirection;

    $(".contentLink").click(function(evt) {
        // prevent default behavior to avoid page refresh
        evt.preventDefault();

        // get the desired position
        newPos = $(this).attr("href");

        // if the current position is less than the desired position
        // move content up, if it's greater than - move it down
        // do nothing if they're equal
        if (newPos > currentPos) {
            $("#content1, #content2, #content3, #content4").animate({
                top: "-=" + ((newPos-currentPos) * 100) + "%" 
            }, 1000);        
        } else if (newPos < currentPos) {
            $("#content1, #content2, #content3, #content4").animate({
                top: "+=" + ((currentPos-newPos) * 100) + "%" 
            }, 1000);  
        }

        // reset currentPos accordingly
        currentPos = newPos;
    });
});

希望有所帮助！

摆脱滚动条

1 个答案: