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 に答える