JS, Jquery вертикальная прокрутка divs и li на кнопках вверх/вниз - нажмите

Question

У меня есть два списка - один с div и один с элементами li, которые мне нужны для вертикальной прокрутки на кнопках p и down. Проблема в том, что он не очень удобен для пользователя и имеет сбои в браузерах, таких как 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 class="schedule"></div> 

Я заполняю его: ..

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

Обратите внимание, что это может измениться, как некоторые другие элементы выглядят, если вы уже не делать этого потому что в вашем коде может быть некоторая компенсация, но определенно стоит равенства