只是禁用滚动不隐藏它？

Question

我正在尝试在使用灯箱时禁用父级的html/body滚动条.这里的主要词是禁用.我也没有想隐藏它overflow: hidden;.

这样做的原因是overflow: hidden使网站跳转并占据滚动区域.

我想知道是否可以在显示时禁用滚动条.

Answer 1

如果覆盖层下的页面可以"固定"在顶部,则可以在打开覆盖层时进行设置

body { position: fixed; overflow-y:scroll }

你仍然应该看到正确的滚动条但内容不可滚动.关闭叠加层时,只需恢复这些属性即可

body { position: static; overflow-y:auto }

我之所以提出这种方式只是因为你不需要改变任何滚动事件

更新

你也可以做一些改进:如果你document.documentElement.scrollTop在图层打开之前通过javascript 获取属性,你可以动态地将该值赋值为topbody元素的属性:使用这种方法,页面将代替它,无论你是否'重新登上或者你已经滚动了.

CSS

.noscroll { position: fixed; overflow-y:scroll }

JS

$('body').css('top', -(document.documentElement.scrollTop) + 'px')
         .addClass('noscroll');

Answer 2

对所选解决方案的四点补充:

1. 将'noscroll'应用于html而不是body,以防止在IE中出现双滚动条
2. 要检查是否确实有一个滚动条增加了"noscroll"课前.否则,该站点也将被新的非滚动滚动条跳转.
3. 为了保留任何可能的scrollTop,整个页面不会回到顶部(如Fabrizio的更新,但你需要在添加'noscroll'类之前获取值)
4. 并非所有浏览器都以与http://help.dottoro.com/ljnvjiow.php中记录的相同方式处理scrollTop.

完整的解决方案似乎适用于大多数浏览器:

CSS

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

禁用滚动

if ($(document).height() > $(window).height()) {
     var scrollTop = ($('html').scrollTop()) ? $('html').scrollTop() : $('body').scrollTop(); // Works for Chrome, Firefox, IE...
     $('html').addClass('noscroll').css('top',-scrollTop);         
}

启用滚动

var scrollTop = parseInt($('html').css('top'));
$('html').removeClass('noscroll');
$('html,body').scrollTop(-scrollTop);

感谢Fabrizio和Dejan让我走上正轨,并感谢Brodingo 解决双滚动条的问题

Answer 3

随着jQuery包含:

禁用

$.fn.disableScroll = function() {
    window.oldScrollPos = $(window).scrollTop();

    $(window).on('scroll.scrolldisabler',function ( event ) {
       $(window).scrollTop( window.oldScrollPos );
       event.preventDefault();
    });
};

启用

$.fn.enableScroll = function() {
    $(window).off('scroll.scrolldisabler');
};

用法

//disable
$("#selector").disableScroll();
//enable
$("#selector").enableScroll();

Answer 4

我是OP

在fcalderan的回答的帮助下,我能够形成一个解决方案.我将解决方案留在这里,因为它清楚地说明了如何使用它,并添加了一个非常关键的细节,width: 100%;

我添加这个课程

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

这对我有用,我正在使用Fancyapp.

Answer 5

这对我来说真的很好....

// disable scrolling
$('body').bind('mousewheel touchmove', lockScroll);

// enable scrolling
$('body').unbind('mousewheel touchmove', lockScroll);


// lock window scrolling
function lockScroll(e) {
    e.preventDefault();
}

当你要锁定滚动时,只需将这两行代码包装成任何决定.

例如

$('button').on('click', function() {
     $('body').bind('mousewheel touchmove', lockScroll);
});

Answer 6

您无法禁用滚动事件,但可以禁用导致滚动的相关操作,如鼠标滚轮和touchmove:

$('body').on('mousewheel touchmove', function(e) {
      e.preventDefault();
});

Answer 7

您可以隐藏主体的滚动条并overflow: hidden同时设置边距，以便内容不会跳转：

let marginRightPx = 0;
if(window.getComputedStyle) {
    let bodyStyle = window.getComputedStyle(document.body);
    if(bodyStyle) {
        marginRightPx = parseInt(bodyStyle.marginRight, 10);
    }
}

let scrollbarWidthPx = window.innerWidth - document.body.clientWidth;
Object.assign(document.body.style, {
    overflow: 'hidden',
    marginRight: `${marginRightPx + scrollbarWidthPx}px`
});

然后你可以在页面上添加一个禁用的滚动条来填补空白：

let marginRightPx = 0;
if(window.getComputedStyle) {
    let bodyStyle = window.getComputedStyle(document.body);
    if(bodyStyle) {
        marginRightPx = parseInt(bodyStyle.marginRight, 10);
    }
}

let scrollbarWidthPx = window.innerWidth - document.body.clientWidth;
Object.assign(document.body.style, {
    overflow: 'hidden',
    marginRight: `${marginRightPx + scrollbarWidthPx}px`
});

textarea {
  overflow-y: scroll;
  overflow-x: hidden;
  width: 11px;
  outline: none;
  resize: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
}

我正是为了我自己的灯箱实现而这样做的。到目前为止似乎运作良好。

Answer 8

这是一个工作演示。您可以通过以下方式使用纯 JavaScript 来完成此操作：

const { body, documentElement } = document;
let { scrollTop } = document.documentElement;

function disableScroll() {
  scrollTop = documentElement.scrollTop;
  body.style.top = `-${scrollTop}px`;
  body.classList.add("scroll-disabled");
}

function enableScroll() {
  body.classList.remove("scroll-disabled");
  documentElement.scrollTop = scrollTop;
  body.style.removeProperty("top");
}

这是 CSS：

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

我们使用position: fixedonbody来防止它可滚动，并使用overflow-y来显示滚动条。我们还需要width根据position: fixed工作原理进行设置。

我们跟踪滚动位置并在禁用滚动时更新它，以便我们可以在禁用滚动时body使用适当的位置top，并在启用滚动时恢复滚动位置。否则body在禁用或启用滚动时将继续跳到顶部。

启用滚动时，我们top从 中删除样式body。position如果您的布局与staticon不同，这可以防止它破坏您的布局body。

如果您使用scroll-behavior: smoothon html，您还需要修改该enableScroll函数，如下所示：

function enableScroll() {
  body.classList.remove("scroll-disabled");
  // Set "scroll-behavior" to "auto"
  documentElement.style.scrollBehavior = "auto";
  documentElement.scrollTop = scrollTop;
  // Remove "scroll-behavior: auto" after restoring scroll position
  documentElement.style.removeProperty("scroll-behavior");
  body.style.removeProperty("top");
}

我们需要暂时设置scroll-behavior为auto这样就不会出现跳跃。