1

尝试完成这项工作的第 3 天……尝试一种纯 CSS 方式（没有 iScrolls，没有 niceScroll）。我想要的似乎很简单：滚动页面，当单击按钮时，我希望页面停止滚动（将位置设置为固定）并将页面保持在该位置（而不是一直跳到顶部）。我想我的 CSS 可能有问题，但这就是我所拥有的：

        body{
            padding: 0;
            margin: 0;
            border: 0;
        }
        #wrapper{
            position: absolute;
            z-index: 1;
            width: 100%;
            left: 0;
            overflow: auto;
        }
        header{
            z-index: 2;
            top: 0; left: 0;
            width: 100%;
            height: 50px;
            background-color: black;
            padding: 0;
            text-align: center;
            color: white;
        }

html

<body>
    <div id="wrapper">
        <header>Main News</header>
        <ul>link with onclick</ul>
        <ul>link with onclick</ul>
        <ul>link with onclick</ul>
        <ul>link with onclick</ul>
        <ul>link with onclick</ul>
        <ul>link with onclick</ul>
        <ul>link with onclick</ul>
        //a lot more li's with links
    </div>
    <script>
    var x;
        function something(){
            x = $('body').scrollTop();
            $('body').css({
                position: 'fixed'
            });
        });
        function somethingelse(){
            $('body').css({
                position: ''
            });
            $('body').scrollTop(x);
        }
    </script>
</body>

我检查了警报，滚动位置保存在变量 x 中。我在这里做错了什么？

编辑1：我还想补充一点，链接是动态添加的……也许这就是它不断滚动到顶部的原因？没有固定高度？

4

1 回答 1

2

我不确定这是否正是您要寻找的，但我制作了一个 jsFiddle 演示如何在用户单击链接后“锁定”（或切换）文档滚动。您也许可以基于此创建解决方案：

var ScrollHandler = (function() {
    //Assumes jQuery has initialized
    var hasScrollListener = false;
    var toggleScrollLock = function() {
        if(!hasScrollListener) {
            $('body').css('overflow', 'hidden');
            $('.freezeScroll').css('color', '#ff0000');
        }
        else { 
            $('body').css('overflow', '');
            $('.freezeScroll').css('color', '#0000ff');
        }
        hasScrollListener = !hasScrollListener;
    }
    //Return a public toggle method
    return {
        toggleScrollLock: toggleScrollLock
    };
});

$(document).ready(function() {
    var scrollHandler = new ScrollHandler(),
        links = $('.freezeScroll');
        links.each(function(i, element) {
            $(element).on('click', function(e) { scrollHandler.toggleScrollLock(); });
        });
});

只需确保修改列表项以包含 freezeScroll 类：

<ul class="freezeScroll">link with onclick</ul>

http://jsfiddle.net/9uQZ8/10/

于 2013-07-31T18:03:16.690 回答