这就是我想要发生的事情：用户点击子div'.box'，当他们点击它时，缩放比例达到完整大小，父div将向上或向下滚动以完全适合子div .
父div的当前发生的事情不会滚动到子div的顶部位置 . 我已经尝试了窗口和父div的偏移并设置了scrollTo，但我想我可能会错过这个函数的关键组件 .
在这里试试：http://codepen.io/daviddiefenderfer/pen/yOodJd
HTML：
<div id="sidebar">
Question Type:
<select>
<option>Text</option>
<option>Slider</option>
<option>Star</option>
</select>
<button id="zoom" onclick="getFullView()">Zoom Out</button>
</div>
<div id="artboard">
<div class="artboard-container">
<div class="box active">
Please select question type
<br>
<br>
<input type="text" placeholder="Question Title">
<div class="answers" >
</div>
</div>
</div>
</div>
CSS：
body, html{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#sidebar{
padding: 10px;
box-sizing: border-box;
width: 15%;
height: 100%;
background-color: #ccc;
float: left;
}
#artboard{
box-sizing: border-box;
width: 85%;
height: 100%;
float: right;
position:relative;
}
.artboard-container{
position: relative;
height: 100%;
width: 100%;
}
.box{
padding: 50px;
text-align: center;
float: left;
background-color: lightblue;
height: 100%;
transform: scale(.5);
transition: transform .6s;
cursor: pointer;
}
.box.active{
transition: .6s curve-bezier (0, 1.08, .59, 1);
transform: scale(1);
position: fixed;
top: 0;
z-index: 1;
cursor: default;
}
#zoom{
position: absolute;
left: 20px;
bottom: 30px;
}
JS：
$(document).ready(function(){
$('.box').width($('#artboard').width());
})
$('.box').on('mouseup', function(){
$(this).addClass('active');
$('#artboard').css('overflow', 'hidden');
});
function getFullView(){
$('.active').removeClass('active');
$('#artboard').css('overflow', 'scroll');
}
1 回答
如果您使用
position:fixed，top＆z-index，则活动框将始终显示在屏幕顶部 .http://codepen.io/anon/pen/jqGOQN