Question

尝试使这项工作的第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：我还想补充一点，链接是动态添加的......也许这就是为什么它一直滚动到顶部的原因？没有固定的高度？

Answer 1

我不确定这是否正是您正在寻找的，但我做了一个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/

在按钮上单击某个滚动位置时固定滚动位置

1 个答案: