粘头

Question

我一直在拼命寻找一个纯JavaScript解决办法，让一个div的内容的滚动（固定高度的div溢出：滚动）..

我已经看到了很多jquery的例子，window.scroll，但我一直在努力得到这个div元素作为纯CSS的工作。

相似，我想要做的是任何例子，

$('div.scrollingDiv').scroll(function() { 
var active = null; 
$('.scrollingDiv h4').each(function (idx, val) { 
    var topOffset = $(val).offset().top; 
    if (topOffset < 20) // elem is 20 px from top 
    { 
     // Element nearest the top 
     active = $(val); 
    } 

    $('.stickyTop').html("Funky Menu : " + active.text()); 
}); 
}); 

..但显然没有jQuery的:)

帮助非常感谢...！

Answer 1

你的语法翻译基于jQuery代码到普通的JavaScript将是：

<script> 
window.onload = function(e) { 
    document.querySelector('.scrollingDiv').onscroll = function(ev) { 
    var title = "Funky Menu: "; 
    var titleElem = document.querySelector('.stickyTop'); 
    var h4 = this.querySelectorAll('h4'); 
    var active = null; 
    for (var i = 0; i < h4.length; i++) { 
     if (h4[i].offsetTop - this.scrollTop < 30) { 
     active = h4[i]; 
     } // elem is visible and close to top 
    } 
    if (active) { 
     title += active.innerHTML; 
    } 
    titleElem.innerHTML = title; 
    }; 
}; 
</script>