修复按钮单击某个滚动位置时的滚动位置答案

【问题标题】：fix scroll position on button click at certain scroll position修复按钮单击某个滚动位置时的滚动位置
【发布时间】：2013-08-01 02:03:16
【问题描述】：

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

【问题讨论】：

您缺少function something() 的右大括号。也许是错字？
@user2025469 查看此示例，禁用滚动而不重置内容位置选项link
@FaisalSayed 抱歉，这里打错了，我的原始代码中有右括号。
@srk，有没有办法在不使用外部库的情况下用纯 css 做到这一点？
@user2025469 它使用简单的 JQuery，您可能想了解如何使用 JQuery > sample，这将帮助您获得解决方案，或者您正在寻找没有 JQuery 的东西？

标签： javascript jquery html css

【解决方案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/

【讨论】：

谢谢，它看起来会起作用，但我终于想出了如何在一页内的多个 div 上实现 iScroll。我需要做的是在包装器内添加另一个 div，这样滚动的不是正文而是包装器内的内容。感谢您的帮助，我可能会将其用于其他用途！