javascript - JS、Jquery 垂直滚动 div 和 li 在上/下按钮上单击

Question

我有两个列表 - 一个带有 div，一个带有 li 元素，我需要在 p 上垂直滚动并单击向下按钮。 问题是它对 li 来说不是很准确，并且在 IE 等浏览器中有故障...... 有没有办法改善它？

    <div class="selectOpt">
         <div><img class="topScroll" src="arrowup.png" title="Up"></img></div>
         <div class="list"><ul class="choose"></ul></div>
         <div><img class="bottomScroll" src="arrowdown.png" title="Down"></img></div>
    </div>

我填充它:

$(".choose").append('<li class="'+list[i]+'Item" value="'+item[1]+'">'+item[1]+'</li>');

然后我使用这段代码来滚动它:

 $(function scrollDivs(){ $('.topScroll').on('click', function(){
            var element = $(this).parents('.selectOpt').children('.list').children('ul');
            if (parseInt(element.css('top')) <= -20){
                element.css('top', "+="+ parseInt(element.children('li').css('height').replace(/[A-Za-z$-]/g, "")*2.1).toString()+"px").css({'transition': 'all 0.4s ease-out'                    });
            } //else $('.topScroll').css('opacity', '0.3');
        });
        $('.bottomScroll').on('click', function() {
            var element = $(this).parents('.selectOpt').children('.list').children('ul');
            if ( parseInt(element.css('top')) >= (parseInt(element.parent().css('height')) - parseInt(element.css('height'))) ){
                element.css('top', "-="+ parseInt(element.children('li').css('height').replace(/[A-Za-z$-]/g, "")*2.09).toString()+"px").css({'transition': 'all 0.4s ease-out'});
            } //else $('.bottomScroll').css('opacity', '0.3');
        });
    });

还有一个带有 div 的 div 可以滚动:

<div class="schedule"></div>

我填写: ..

.forEach(function(raw){
$('.schedule").append('<div class="eRaw"><span class="pe"></span><span class="time"></span><span class="date"></span></div>');});

我滚动 div:

var step=10;
var scrolling=false;
$(".scrollUp").bind("click",function(event) {event.preventDefault();
    $(".schedule").animate({scrollTop: "-=" +step+ "px"});
}).bind("mousedown",function(event) {scrolling=true;scrollContent("up");
}).bind("mouseup",function(event) {scrolling=false;});
$(".scrollDown").bind("click",function(event) {event.preventDefault();
    $(".schedule").animate({scrollTop: "+=" +step+ "px"});
}).bind("mousedown",function(event) {scrolling=true;scrollContent("down");
}).bind("mouseup",function(event) {scrolling=false;});
function scrollContent(direction) {var amount = (direction === "up" ? "-=1px" : "+=1px");
    $(".schedule").animate({scrollTop:amount}, 1, function(){if(scrolling){scrollContent(direction);}});
}
$(".schedule").on('mousewheel', function(event, delta) {event.preventDefault();
});

Answer 1

如果您在不同的浏览器上获得不同的滚动量，如果您还没有这样做，也许进行 css 重置会有所帮助。

不同的浏览器可以为元素添加不同数量的填充和边距，但如果一切都相同，那么所有浏览器中的效果应该是相同的。

对于我的主 css 文件顶部的每个元素:

CSS:

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,
abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,
strike,strong,sub,sup,tt,var,dd,dl,dt,fieldset,form,label,legend,table,caption,
tbody,tfoot,thead,tr,th,td {
margin: 0;
padding: 0;
border: 0;
font-weight: normal;
font-style: normal;
font-size: 100%;
line-height: 1.2;
font-family: inherit;
text-align: left;
}

请注意，如果您还没有这样做，这可能会改变其他一些元素的外观，因为您的代码中可能会有一些补偿，但绝对值得平等