时间戳

首页 > 解决方案 > CSS：目标+滚动条

css - CSS：目标+滚动条

问题描述

当弹出目标处于活动状态时，我可以隐藏滚动条吗？只有CSS。

div {display: none}
#popup:target{display: block;}
<a href="#popup">Popup</a>
<a href="#">Del</a>

<div id="popup">
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
</div>

https://jsfiddle.net/5bjLwc1e/

标签： css

解决方案

我觉得没关系。我想要做的是，当#popup:target 处于活动状态时，BODY，也许 HTML 标记将是 {overflow: hidden}

我试过了

#popup:target:active + body {overflow: hidden;}
#popup:target ~ body {overflow: hidden;}

但什么都没有。

我用 jQuery 做了这个，效果很好！但是我可以用纯 CSS 来做吗？泰

var url = window.location.hash;
$(function(){
  if (url.substring(url.indexOf('#'))){
    $("html, body").css({
    overflow: 'hidden',
    height: '100%'
});
  }
  $("#isnt-scroll").click(function() {
    $("html, body").css({
    overflow: 'hidden',
    height: '100%'
});
    }); 
});

推荐阅读