jquery 添加固定位置时防止页面滚动到顶部

qvtsj1bj 于 4个月前发布在 jQuery

关注(0)|答案(3)|浏览(46)

我遇到了一个问题，每当我将.noscroll类添加到body中时，页面都会滚动到顶部。这样，滚动条仍然可见，但每当覆盖层出现时，滚动条就会变灰。
我知道这是addClass（）函数造成的，因为当我注解掉那一行时，当我的覆盖出现时，它不会滚动到顶部。

jQuery查询

$('a').click(function(e) {
    //reset default anchor behavior
    e.preventDefault();

    //add noscroll class to body
    $("body").addClass("noscroll"); 

    //open overlay box
    openOverlayBox(); 
});

字符串
openOverlayBox()功能只是一个黑色的浏览器屏幕覆盖。

CSS

body.noscroll{
    position: fixed;
    width: 100%;
    overflow-y: scroll;
}

型

正文HTML

<a href="#">Test</a>

型
如何在将.noscroll类添加到body中后使滚动位置保持不变？

**编辑1：**我试图实现与Facebook相同的效果。如果您查看图片或视频，则会出现叠加，滚动条变灰，但滚动位置保持不变。
**编辑2：**我发现了一个非常接近我的问题的solution，但唯一的问题是，这并没有使滚动条变灰，而是将其删除。此外，当内容居中时，它仍然会使内容向右跳一点，因为主体的滚动条是隐藏的。
**编辑3：**在Cuberto的回答和我自己的一些研究之后，我发现了需要做些什么才能让它工作我想要的。但是我不知道我将如何开始做它。但这是应该解决的问题。我在打开覆盖时，我需要将我的主div设置为position: fixed和滚动位置的负值。当退出覆盖时，position: fixed;和top属性应该被删除，并设置与打开覆盖时相同的滚动位置。

jquery

来源：https://stackoverflow.com/questions/20230435/prevent-page-scrolling-to-top-upon-adding-fixed-position

3条答案

按热度按时间

x8diyxa71#

我相信这就是你要找的。*

希望你喜欢this fiddle。我把你在你的问题结束时提到的一个，并按照你想要的方式重新工作。
我碰巧在我的网站上做了类似的事情，但我从来没有限制滚动到现在。

JavaScript + jQuery：

$(document).ready(function () {
    var offsetY = window.pageYOffset,
        $body = $('body'),
        $win = $(window),
        $close = $('.close'),
        $open = $('.open'),
        $holder = $('#popupholder'),
        $stuff = $('#stuff');
    // Close with 'esc' key
    $(document).keyup(function (e) {
        if (e.keyCode == 27) $close.trigger('click');
    });
    $open.click(function () {
        offsetY = window.pageYOffset;
        // Block scrolling
        $body.css({
            'position': 'fixed',
                'color': '#FFFF00',
                'backgroundColor': '#00D',
                'top': -offsetY + 'px'
        });
        // Show popup
        $holder.css('display', 'block');
    });

    $close.click(function () {
        // Allow scrolling again
        $body.css({
            'position': 'static',
                'color': '',
                'backgroundColor': ''
        });
        /**
         * Remove the following scrollTop()'s if you want.
         * just a UI tweak that the user would expect.
         **/
        // Make the page stay at the position it was at before the overlay
        $win.scrollTop(offsetY);
        // Reset the overlay scroll position to the top
        $stuff.scrollTop(0);
        // Hide popup
        $holder.css('display', 'none');
    });
});

字符串

CSS：

#popupholder {
    max-height: none;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.75);
    display: none;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}
#wrap {
    max-height: none;
    position: fixed;
    overflow: hidden;
    top: 60px;
    right: 60px;
    left: 60px;
    bottom: 60px;
    background-color: rgba(155, 155, 134, 0.5);
    display: block;
}
#stuff {
    max-height: 100%;
    position: absolute;
    overflow-y: scroll;
    top: 0;
    /* If you want the scrollbar inside the overlay to show up, set right: 0; */
    right: -20px;
    left: 0;
    bottom: 0;
    padding: 10px;
}

型

HTML：

（节录版本）*

<div id="popupholder">
    <div id="wrap">
        <div id="stuff">
            <button class="close">Close me</button>
            <p> Inside information </p>
            <button class="close">Close me</button>
        </div>
    </div>
<button class="open">Popup</button>

型
原始代码归功于这个答案。代码被高度修改，但归功于该归功的地方。

赞(0）回复(0）举报 4个月前

mitkmikd2#

快速浏览一下Facebook是如何做到这一点的，它是这样的：

<body>
  <div class="main" style="position: fixed; top: -400px"></div>
  <div class="overlay" style="position: absolute; width: 100%; height: 100%"></div>
</body>

字符串
对不起，内联样式。您需要以编程方式将主div的top样式设置为您的滚动位置。

赞(0）回复(0）举报 4个月前

mklgxw1f3#

这个问题开始于当你打开模态或任何覆盖时，背景滚动仍然启用，为了防止这种情况，我们添加了overflow：hidden; CSS，它可以在几乎所有的浏览器和操作系统上有效地工作。但是我们在IOS和一些Linux浏览器上有一个问题。所以为了解决这个问题，我们添加了另一个CSS位置：fixed;它解决了这个问题，但它产生了一个新的问题。
添加CSS位置后：固定的;主体在顶部自动滚动，并失去了实际位置，这会给网站造成错误的印象。
我通过在主容器外定义一个变量并仅在模态关闭时更新其值来解决这个问题。然后在模态关闭时再次滚动body到相同的位置。

let scrollY = 0;
//defining outside because when when modal is open that body scrolls to top and make it 0 again and lost scroll position

const Component = () => {
  modalVisibleHandler = (value) => {
    if (value) {
        scrollY = window.scrollY;
        
        //add all added css when modal is open to prevent scrolling background
        
        document.body.style.position = 'fixed';
        document.body.style.top = `-${scrollY}px`;
        document.body.style.width = '100%';
    } else {
        //remove all added css when modal is close
        
        document.body.style.position = '';
        document.body.style.top = '';
        document.body.style.width = '';
        window.scrollTo(0, scrollY);
    }
  }
}

字符串

赞(0）回复(0）举报 4个月前

我来回答

jquery 添加固定位置时防止页面滚动到顶部

3条答案

JavaScript + jQuery：

CSS：

HTML：

相关问题

热门标签

最新问答