Scroll and Margin

스크롤 리스트의 아이템에 마진이 포함 되어 있고 아이템의 크기 배수와 리스트의 프레임 크기가 일치 하지 않는 경우가 많아서 Scroll 코드를 수정 하였다.

아이템에 마진이 포함되어 있는 경우 아이템의 높이를 구하는 방법은 다음과 같다.

이 방법은 마진이 포함 되어 있지 않다.
var itemHeight1 = view.children[index].offsetHeight;     

이 방법은 마진이 포함 되어 있지만 실제 값은 parseInt(style.height) + parseInt(style.marginBottom) 값과 일치 한다.
var style = window.getComputedStyle(view.children[index],null);
var itemHeight2 = parseInt(style.height) + parseInt(style.marginBottom) + parseInt(style.marginTop);

이 방법으로 아이템1과 아이템2의 위치 차이를 구할수 있다.
var h1 = view.children[0].offsetTop;
var h2 = view.children[1].offsetTop;
var itemHeight = h2 - h1;

다음의 두가지 방법에 대해서 알아 본다.
1. scrollIntoView 함수로 스크롤 하는 방법
2. scrollTop으로 스크롤 하는 방법

1. scrollIntoView 함수로 스크롤 하는 방법

var scrollList = function(oldIndex, curIndex) {
    var view = getElement(listname);
    if(!view.children.length)
        return;
        
    view.children[oldIndex].classList.remove('selectElement');
    view.children[index].classList.add('selectElement');

    var h1 = view.children[0].offsetTop;
    var h2 = view.children[1].offsetTop;
    var itemHeight = h2 - h1;
    
    let isUp = (curIndex < oldIndex);
    if(isUp === false) {
        var scrollEnd = view.scrollTop + view.clientHeight;
        var curPos = (index+1) * itemHeight;
        if(curPos > scrollEnd)
            view.children[index].scrollIntoView(false);
    }
    else {
        var scrollStart = view.scrollTop;
        var curPos = (index) * itemHeight;
        if(curPos <= scrollStart)
            view.children[index].scrollIntoView(true);              
    }            
}

2. scrollTop으로 스크롤 하는 방법

var scrollList = function(oldIndex, curIndex) {
    var view = getElement(listname);
    if(!view.children.length)
        return;
       
    view.children[oldIndex].classList.remove('selectElement');
    view.children[index].classList.add('selectElement');

    var h1 = view.children[0].offsetTop;
    var h2 = view.children[1].offsetTop;
    var itemHeight = h2 - h1;    
   
    var gap = (curIndex+1)*itemHeight - view.scrollTop;
    var move = curIndex - oldIndex;

    if(move > 0 && gap > view.offsetHeight) {
        view.scrollTop = (curIndex+1)*itemHeight - view.offsetHeight;
    }
   
    if  (move < 0 && gap - itemHeight < 0) {
        view.scrollTop = itemHeight*index;
    }
}

scrollIntoView 함수로 스크롤 하는 방법 : scrollIntoView.html
scrollTop으로 스크롤 하는 방법 : scrollTop.html

참조)
Hide Scrollbar :   tutorial17.html