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

我有两个列表 - 一个div和一个li元素，我需要vertcal -p滚动和向下按钮单击。问题是，它不是很厉害的李和浏览器像IE一样的故障... 有没有办法改善它？JS，Jquery上下按钮的div和li垂直滚动 - 点击

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

来源

2015-05-25 CodeGust

如果您收到不同的滚动量不同的浏览器，也许做一个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; 
}

注意，这可能会改变一些其他元素的外观，如果你不已经做到这一点因为在你的代码中可能会有一些补偿，但绝对值得等于

来源

2015-05-25 18:08:36

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

回答

相关问题