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;
}

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

JS，Jquery垂直滚动的div和li上/下按钮 - 单击

1 个答案: