Question

我的网站布局现在有问题......

布局类似于我制作的这个小提琴。顶层具有我的项目缩略图，当用户单击缩略图时，下层会显示项目详细信息。

我遇到的问题是用户必须向下滚动才能点击顶层的缩略图。然后，当图层淡出时，下面的div已经用它滚动了 - 我需要div而不是scrollTop（0）......

请看我的小提琴，了解我在说什么：

＆＃13;

$('#click').on('click', function(){
	$('#topPanel').fadeOut(600);
})

＆＃13;

#click {
  padding:10px 15px;
  position:fixed;
  z-index:100;
}

#topPanel, #bottomPanel {
  width:80%;
  height:auto;
  margin:0 auto;
  padding:100px;
  text-align:center;
}
#topPanel {
  background:green;
  position:absolute;
  z-index:10;
}
#bottomPanel {
  background:yellow;
  position:absolute;
  z-index:0;
}
#topPanel p, #bottomPanel p {
  padding: 500px 0;
  text-transformation:uppercase;
}
#bottomPanel p:nth-child(odd){
  background:#555;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="click">CLICK ME TO FADEOUT TOP</button>
<br>
<p>please scroll down and then click button above to see issue</p>

<div id="topPanel">
  <p>top of page</p>
  <p>middle of page</p>
  <p>bottom of page</p>
</div>

<div id="bottomPanel">
  <p>top of page</p>
  <p>middle of page</p>
  <p>bottom of page</p>
</div>

＆＃13;

https://jsfiddle.net/reese329/50urkgtm/

Answer 1

问题是您的面板不滚动：整个文档正在滚动！诀窍是在包装器元素（或主体）上设置// Pass the appropriate values to query selector of the canvas which we need to hide, In your code snippet you have given it as center, replace it with numeric values var query="canvas[x= fill the value of x ][y= fill the value of y][height= 'give the height'][width='give the width']"; // Finding the canvas var canvas=document.querySelector(query); // Hide the canvas canvas.style.display="none";，并使面板本身可以使用overflow: hidden滚动。 Here is a working example.

请注意，我必须明确设置面板的高度（到overflow-y: scroll，填充视口）。

我还修复了您的100vh规则（样式为text-transform: uppercase，而不是text-transform :)。

JavaScript：需要较低的div（在绝对div下）不要滚动

1 个答案: