jQuery - 锁定滚动条并防止页面跳到顶部？

时间：2016-11-25 16:09:52

标签： javascript jquery html css scrollbar

我想在触发叠加层时锁定窗口上的滚动条，这样可以正常工作。但问题是当您将页面滚动到底部/中间并触发叠加时，正文/文档会跳到顶部。

我不希望页面跳到顶部。当你点击图像时，我想要实现的是类似于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。

2 个答案:

答案 0 :(得分：1)

好吧，我会以这种方式锁定滚动，而不是使用fixed定位lock-scrollbar：

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

点击main和overflow-y返回auto：

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

隐藏overlay时。

请参阅下面的演示和updated fiddle here：

＆＃13;
＆＃13; 
$(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;
  });
});
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

修改：

如果您想坚持position: fixed解决方案 - 获取/设置scrollTop的值以重置滚动。

在锁定滚动时也在$('html').css({'top':-scrollTop + 'px'})中添加 - 请参阅下面的演示：

＆＃13;
＆＃13; 
$(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;
  });
});
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：-1)

尝试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/

相关问题
最新问题