javascript - 使内部 div 可滚动

Question

当 body 设置为 overflow:hidden 时，我如何在内部 DIV 上启用滚动，因为我有限制编辑 body CSS

这是 JSfiddle demo

正文 CSS 是

body {
    margin: 0;
    padding: 0;
    background-color: #000;
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
}

内部 DIV CSS 如下 - 默认情况下，div 的高度由 jQuery 设置。

.custom-gallery-lineage {
    float: left;
    width: 100%;
    overflow: auto;
    color: #fff;
    font-size: 18px;
}

Answer 1

您必须使用 $(window).height() 而不是 $(document).height()，检查下面的代码片段或更新的 fiddle https://jsfiddle.net/sgh1gqh5/2/

$(document).ready(function() {
	var winw = $(window).width();
	var winh = $(window).height();
	$(".custom-gallery-lineage").height(winh);
});

body {
	margin: 0;
	padding: 0;
	background-color: #000;
	overflow: hidden;
	max-width: 100%;
	max-height: 100%;
}
.custom-gallery-lineage {
	float: left;
	width: 100%;
	overflow: auto;
	color: #fff;
	font-size: 18px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-gallery-lineage">
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
  <p>This is test content</p>
</div>