[英]Inner DIVs scrolling/sliding up to the top of the DIV they inhabit
我有一列div
另一个中设置的元件div
元件。 父或主div
设置为特定的高度并且可以滚动。
调用函数时,基于要调用的内部div的ID,我希望内部div
设置动画/滚动到主div
的顶部。
注意,我不希望div
元素改变位置-只是在保持原始位置的同时向上滚动。
这是我的代码:
document.addEventListener('click', goStart); function goStart(event) { // Call the function clicknext('3'); }; function clicknext(id) { jQuery('#subdiv-' + id).animate({ scrollTop: (jQuery('#main-div').offset().top) }, 500); }
.inner { height: 50px; width: 100px; background: #c0c0c0; color: white; margin-bottom: 20px; } #main-div { height: 100px; overflow-y: scroll; background: #EFEFEF; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="main-div"> <div class="inner" id="subdiv-1"> DIV 1 </div> <div class="inner" id="subdiv-2"> DIV 2 </div> <div class="inner" id="subdiv-3"> DIV 3 </div> </div> <input type="button" value="TRIGGER THE FUNCTION" id="triggerbutton">
滚动值相对于父 offsetTop('#main-div')
const TabInner = [ (document.getElementById('subdiv-1').offsetTop - document.getElementById('main-div').offsetTop), (document.getElementById('subdiv-2').offsetTop - document.getElementById('main-div').offsetTop), (document.getElementById('subdiv-3').offsetTop - document.getElementById('main-div').offsetTop) ]; var Trigg_ref = 1; triggerbutton.onclick = function() { Trigg_ref = (Trigg_ref +1) % 3; clicknext(Trigg_ref); }; function clicknext(id) { jQuery('#main-div').animate({ scrollTop: TabInner[id] }, 500); }
.inner { height:50px; width:100px; background: #c0c0c0; color:white; margin-bottom:20px; } #main-div { height:100px; overflow-y:scroll; background:#EFEFEF; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="main-div"> <div class="inner" id="subdiv-1"> DIV 1 </div> <div class="inner" id="subdiv-2"> DIV 2 </div> <div class="inner" id="subdiv-3"> DIV 3 </div> </div> <input type="button" value="TRIGGER THE FUNCTION" id="triggerbutton">
更新至CSS Transformation Animation on Transform以获得最佳性能新答案: https : //jsfiddle.net/t5f6e9k3/您应该查看https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor -only的属性和管理的层计数
.inner {
height:100%;
width:100%;
background: #c0c0c0;
color:white;
position:absolute;
top:0;
left:0;
transition: transform linear 300ms, opacity linear 300ms;
}
#main-div {
display:inline-block;
width:100px;
height:100px;
overflow:hidden;
background:#EFEFEF;
position:relative;
}
.inner:not(.active) {
transform: translate3d(0,100%,0);
}
function clicknext(id) {
var active = document.querySelectorAll('.inner.active');
for(var i=0; i<active.length; i++){
active[i].classList.remove('active');
}
var current = document.querySelector('#subdiv-'+id);
if(!current.classList.contains('active')){
current.classList.add('active');
}
}
原始答案:您滑错了元素。 如果您想要“窗口”类型的滚动效果,仅将内容滚动到查看容器中: https : //jsfiddle.net/yo45601j/1/
var main = jQuery('#main-div');
var elm = jQuery('#subdiv-'+id);
main.animate({
scrollTop: (elm[0].offsetTop - main[0].offsetTop)
},500);
或仅重置为0 https://jsfiddle.net/yo45601j/
function clicknext(id) {
jQuery('#main-div').animate({
scrollTop:0
},500);
}
元素position属性必须是绝对的,才能使其在其他元素上设置动画。 尝试这个
document.addEventListener('click', goStart); function goStart(event) { // Call the function clicknext('3'); }; function clicknext(id) { jQuery('#subdiv-' + id).css("position","absolute").animate({ top: 0 }, 500); }
.inner { height: 50px; width: 100px; background: #c0c0c0; color: white; margin-bottom: 20px; } #main-div { height: 100px; overflow-y: scroll; background: #EFEFEF; position: relative; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="main-div"> <div class="inner" id="subdiv-1"> DIV 1 </div> <div class="inner" id="subdiv-2"> DIV 2 </div> <div class="inner" id="subdiv-3"> DIV 3 </div> </div> <input type="button" value="TRIGGER THE FUNCTION" id="triggerbutton">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.