jQuery-鎖定滾動條並防止頁面跳到頂部？

Question

我想在觸發疊加層時將滾動條鎖定在窗口上，這很好用。 但是問題是當您將頁面滾動到底部/中間並觸發覆蓋時，正文/文檔跳到頂部。

我不希望頁面跳到頂部。 我要實現的功能類似於單擊圖像時Facebook的圖像疊加/彈出窗口 -單擊圖像時它鎖定背景，但是退出圖像彈出窗口時，背景保持不變。 可能嗎？

CSS：

html,
body {
  font-family: 'Raleway', sans-serif;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: auto;
  color: #000;
}

html.lock-scrollbar {
  position: fixed;
  overflow-y: scroll;
  width: 100%;
  height: 100%;
}

#main {
    height: 2000px;
    border: 1px solid red;
}

.overlay {
    width: 90%;
    height: 100%;
    background: #fff;
    z-index: 999;
    overflow: auto;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    border: 1px solid black;
} 

jQuery的：

 $( document ).ready(function() {
    var windowHeight = $(window).height();
    console.log(windowHeight);

    $("#main").click(function(){
        $("html").addClass('lock-scrollbar');
        $('.overlay').show();
        return false;
    });

    $(".overlay").click(function(){
        $("html").removeClass('lock-scrollbar');
        $('.overlay').hide();
        return false;
    });
});

HTML：

 <div id="main">
    <h1>New Scrolling Window</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a justo erat, volutpat hendrerit dolor. Sed urna nibh, dapibus at egestas non, vulputate ut quam. Morbi a erat tristique tellus varius venenatis. Aenean lacinia sem eget turpis fringilla commodo. Sed lorem nisi, viverra a interdum nec, varius eu enim. Donec ornare, nunc quis eleifend iaculis, nulla eros mollis tellus, quis faucibus risus odio non lectus. Maecenas ac velit non metus rhoncus commodo. Nunc ligula est, ultricies sed mattis sed, dapibus at arcu. Maecenas lacinia nisl ut sem bibendum ac condimentum purus facilisis. Curabitur ut nibh lobortis libero interdum vehicula vel quis nulla.</p>

    <p>Suspendisse et massa urna. Donec eu lorem nec felis dapibus aliquam viverra in quam. Suspendisse ultrices, nisi ac venenatis porttitor, erat turpis dapibus augue, sed rutrum nunc ante sed enim. Aliquam et tempus mi. Nullam malesuada, nunc a eleifend pretium, justo lorem tempus justo, id adipiscing dolor ipsum sed velit. Maecenas odio massa, feugiat vel sodales ut, placerat at quam. Cras viverra diam vitae diam elementum vitae aliquet erat tincidunt. Quisque fringilla neque in lacus tempor cursus. Curabitur eget nulla et nisi dignissim tempor vel non risus. Mauris ac ipsum metus, a auctor massa. Nunc eros ante, ullamcorper a mollis nec, aliquam sed est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="overlay"></div>

我做錯了什么？

我的jsfiddle 。

Answer 1

好吧，我將以這種方式鎖定滾動，而不是使用fixed位置的lock-scrollbar ：

$('html,body').css({'overflow-y': 'hidden'});

在單擊main和overflow-y返回auto ：

$('html,body').css({'overflow-y': 'auto'});

隱藏overlay時。

請參閱下面的演示，並updated fiddle here ：

 $(document).ready(function() { var windowHeight = $(window).height(); // console.log(windowHeight); $("#main").click(function() { $('html,body').css({'overflow-y': 'hidden'}); $('.overlay').show(); return false; }); $(".overlay").click(function() { $('html,body').css({'overflow-y': 'auto'}); $('.overlay').hide(); return false; }); }); 

 html, body { font-family: 'Raleway', sans-serif; height: auto; margin: 0; padding: 0; overflow: auto; color: #000; } html.lock-scrollbar { position: fixed; overflow-y: scroll; width: 100%; height: 100%; } #main { height: 2000px; border: 1px solid red; } .overlay { width: 90%; height: 100%; background: #fff; z-index: 999; overflow: auto; position: fixed; top: 0; left: 0; display: none; border: 1px solid black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="main"> <h1>New Scrolling Window</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a justo erat, volutpat hendrerit dolor. Sed urna nibh, dapibus at egestas non, vulputate ut quam. Morbi a erat tristique tellus varius venenatis. Aenean lacinia sem eget turpis fringilla commodo. Sed lorem nisi, viverra a interdum nec, varius eu enim. Donec ornare, nunc quis eleifend iaculis, nulla eros mollis tellus, quis faucibus risus odio non lectus. Maecenas ac velit non metus rhoncus commodo. Nunc ligula est, ultricies sed mattis sed, dapibus at arcu. Maecenas lacinia nisl ut sem bibendum ac condimentum purus facilisis. Curabitur ut nibh lobortis libero interdum vehicula vel quis nulla.</p> <p>Suspendisse et massa urna. Donec eu lorem nec felis dapibus aliquam viverra in quam. Suspendisse ultrices, nisi ac venenatis porttitor, erat turpis dapibus augue, sed rutrum nunc ante sed enim. Aliquam et tempus mi. Nullam malesuada, nunc a eleifend pretium, justo lorem tempus justo, id adipiscing dolor ipsum sed velit. Maecenas odio massa, feugiat vel sodales ut, placerat at quam. Cras viverra diam vitae diam elementum vitae aliquet erat tincidunt. Quisque fringilla neque in lacus tempor cursus. Curabitur eget nulla et nisi dignissim tempor vel non risus. Mauris ac ipsum metus, a auctor massa. Nunc eros ante, ullamcorper a mollis nec, aliquam sed est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </div> <div class="overlay"></div> 

編輯 ：

如果要堅持以下position: fixed解決方案-獲取/設置scrollTop的值以重置滾動。

在鎖定滾動條的同時還添加到$('html').css({'top':-scrollTop + 'px'}) -請參見以下演示：

 $(document).ready(function() { var windowHeight = $(window).height(); // console.log(windowHeight); var scrollTop = 0; $("#main").click(function() { scrollTop = $(window).scrollTop(); $("html").addClass('lock-scrollbar'); $('html').css({'top':-scrollTop + 'px'}); $('.overlay').show(); return false; }); $(".overlay").click(function() { $("html").removeClass('lock-scrollbar'); $(window).scrollTop(scrollTop); $('.overlay').hide(); return false; }); }); 

 html, body { font-family: 'Raleway', sans-serif; height: auto; margin: 0; padding: 0; color: #000; } html.lock-scrollbar { position: fixed; overflow-y: scroll; width: 100%; height: 100%; } #main { height: 2000px; border: 1px solid red; } .overlay { width: 90%; height: 100%; background: #fff; z-index: 999; overflow: auto; position: fixed; top: 0; left: 0; display: none; border: 1px solid black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="main"> <h1>New Scrolling Window</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a justo erat, volutpat hendrerit dolor. Sed urna nibh, dapibus at egestas non, vulputate ut quam. Morbi a erat tristique tellus varius venenatis. Aenean lacinia sem eget turpis fringilla commodo. Sed lorem nisi, viverra a interdum nec, varius eu enim. Donec ornare, nunc quis eleifend iaculis, nulla eros mollis tellus, quis faucibus risus odio non lectus. Maecenas ac velit non metus rhoncus commodo. Nunc ligula est, ultricies sed mattis sed, dapibus at arcu. Maecenas lacinia nisl ut sem bibendum ac condimentum purus facilisis. Curabitur ut nibh lobortis libero interdum vehicula vel quis nulla.</p> <p>Suspendisse et massa urna. Donec eu lorem nec felis dapibus aliquam viverra in quam. Suspendisse ultrices, nisi ac venenatis porttitor, erat turpis dapibus augue, sed rutrum nunc ante sed enim. Aliquam et tempus mi. Nullam malesuada, nunc a eleifend pretium, justo lorem tempus justo, id adipiscing dolor ipsum sed velit. Maecenas odio massa, feugiat vel sodales ut, placerat at quam. Cras viverra diam vitae diam elementum vitae aliquet erat tincidunt. Quisque fringilla neque in lacus tempor cursus. Curabitur eget nulla et nisi dignissim tempor vel non risus. Mauris ac ipsum metus, a auctor massa. Nunc eros ante, ullamcorper a mollis nec, aliquam sed est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </div> <div class="overlay"></div> 

Answer 2

試試CSS：

html, body {
  font-family: 'Raleway', sans-serif;
  margin: 0;
  padding: 0;
  color: #000;
}

嘗試JS：

 $( document ).ready(function() {
  var windowHeight = $(window).height();
  console.log(windowHeight);

  $("#main").click(function(){
    $('body').css({
      overflow: 'hidden',
      height: '100%'
            });
    $('.overlay').show();
    return false;
  });

  $(".overlay").click(function(){
    $('body').css({
      overflow: 'auto',
      height: 'auto'
            });
    $('.overlay').hide();
    return false;
  });

});

您修改后的jsfiddle： https ://jsfiddle.net/y9e1kt3q/

新小提琴（滾動條仍然可見）： https : //jsfiddle.net/y9e1kt3q/1/