Javascript 要滚动到子div位置的父div
以下是我试图实现的目标: 用户单击子div“.box”,当他们单击它时,缩放将上升到全尺寸,父div将向上或向下滚动,以完全适合子div 当前发生的情况父div没有滚动到子div的顶部位置。我尝试过窗口和父div的偏移量,并将scrollTo设置为,但我认为我可能缺少该函数的一个关键组件 请在此处尝试: HTML: JS:Javascript 要滚动到子div位置的父div,javascript,jquery,html,css,Javascript,Jquery,Html,Css,以下是我试图实现的目标: 用户单击子div“.box”,当他们单击它时,缩放将上升到全尺寸,父div将向上或向下滚动,以完全适合子div 当前发生的情况父div没有滚动到子div的顶部位置。我尝试过窗口和父div的偏移量,并将scrollTo设置为,但我认为我可能缺少该函数的一个关键组件 请在此处尝试: HTML: JS: 如果使用position:fixed,top和z-index,则活动框将始终显示在屏幕顶部 .box.active{ transition: .6s curve-bezi
如果使用
position:fixed
,top
和z-index
,则活动框将始终显示在屏幕顶部
.box.active{
transition: .6s curve-bezier (0, 1.08, .59, 1);
transform: scale(1);
top: 0;
position: fixed;
z-index: 1;
cursor: default;
}
请提供必要的代码,以重现问题中的问题,而不是在链接的网站中。我希望有一种简单的方法将it视图滚动到孩子。但是,如果它起作用,它就起作用了。非常感谢。
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;
}
$(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');
}
.box.active{
transition: .6s curve-bezier (0, 1.08, .59, 1);
transform: scale(1);
top: 0;
position: fixed;
z-index: 1;
cursor: default;
}