javascript - 摆脱滚动条

标签 javascript jquery html css scroll

<分区>


关于您编写​​的代码问题的问题必须在问题本身中描述具体问题 — 并且包括有效代码 以重现它。参见 SSCCE.org寻求指导。

关闭 9 年前

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

最佳答案

我会这样做:我会拥有一个包罗万象的 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;
    });
});

希望对您有所帮助!

关于javascript - 摆脱滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20315122/

上一篇:javascript - 如何在 twitter bootstrap 2.3.2 中为网页设置最小宽度

下一篇:html - 如何将不同高度的元素与表格单元格的顶部和底部对齐?

相关文章:

JavaScript - innerHTML 改变更多然后第一次出现加上随机数组

javascript - 创建弹出窗口会触发警告... $tooltip 现在已弃用。使用 $uibTooltip 代替

javascript - 正则表达式提取带括号的文本(一个字符串中的多个一)

javascript - jquery mobile动态添加元素无法正常工作

javascript - 这个脚本在 jQuery 中的替代方案?

html - 包含 iframe 的页面中的选项卡(键盘)导航

javascript - 谷歌应用脚​​本: onEdit

javascript - 如何在 JavaScript 中通过 id 和 class 选择元素?

jquery - javascript函数引用和参数传递解释

html - CSS z-index 不适用于相对定位