[英]ScrollTop does not work within DIV with overflow:hidden
我有一个具有隐藏溢出的DIV,该DIV的整个CSS块如下所示:
.mainContainer .display_box .container .row .col_4 .dPost_box{
position:relative;
height:100%;
width: 100%;
overflow:hidden;
}
然后,我希望每次将鼠标悬停在元素上时都使DIV的内容滚动。 但是,它不起作用。 我已经尝试过jQuery.scrollTop()以及更新常规的scrollTop,但它不起作用。 我也尝试使用Smooth Scroll和Autoscroll插件,但是它们都不起作用。 我当前的Javascript如下所示:
function autoScroll(div){
setInterval(function() {
if (div.scrollTop() < div[0].scrollHeight - div.height()){
div.scrollTop(div.scrollTop() + 10);
}}, 1000);
}
$(document).on({mouseenter: function(){
autoScroll($(this));
}, mouseleave: function(){
}}, '.dPosts_post');
我也尝试过:
function autoScroll(div){
setInterval(function() {
if (div.scrollTop() < div[0].scrollHeight - div.height()){
div.scrollTop[0] +=10;
}}, 1000);
}
但是什么都行不通。 最好是,我想使autoScroll
函数正常工作,但是如果有任何可以工作的插件,我将非常乐于尝试它们。
任何想法将不胜感激。 谢谢!
我无法使scrollTop正常工作,但是我想到了一种解决方法。 这是代码,如果将来有人遇到类似的问题:
funnction autoScroll(div){
//check whether the content does not fit inside the div
if(div[0].scrollHeight>div.height()){
//calculate how much the div needs to be scrolled
var distance = div[0].scrollHeight - div.height() + 20;
var topCoord = parseInt(div.css('top')); //inital top coordinate of the div
var lineHeight = Math.floor(parseInt(div.css('font-size')) * 1.5);
//calculate approximately how many lines there are in the distance that needs scrolling
var linesCt = distance/lineHeight;
//scroll the div at a pace of 2.5s per line
div.animate({top: topCoord - distance + 'px'}, 2500 * linesCt);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.