AX5UI 그리드 우측, 아래 스크롤 관련

maq · 6월 19, 2019, 5:26오전

안녕하세요

AX5UI로 개발을 하다보니 그리드 내에서 표를 내리는 우측 스크롤과

옆으로 넘기는 아래 스크롤 관련하여 영역을 클릭하면 PAGE UP, DOWN이 아닌

스크롤바가 그 영역으로 이동을 하는데 PAGE UP, DOWN 형식으로 바꿀순 없을까요?

이해를 위해 해당 아래 이미지 첨부합니다

thomasJang · 6월 19, 2019, 6:15오전

이해를 돕기위해 조금만 상세히 설명을 해주세요.
스크롤바 트랙을 클릭하면 스크롤바가 움직인다는 말씀인가요?

maq · 6월 19, 2019, 6:19오전

현재 임의에 스크롤바 트랙을 클릭하면 그 클릭한 위치로 스크롤바가 이동하는데

그게 아닌 클릭하면 page up, down형식으로 조금씩 내려오게 바꿀수 있는지요…

maq · 6월 24, 2019, 1:12오전

이거 방법이 없는건가요? 아니면 설명이 부족한건가요?

thomasJang · 6월 24, 2019, 2:03오전

github.com

ax5ui/ax5ui-kernel/blob/master/src/ax5ui-grid/src/modules/ax5grid-scroller.js#L422


        scrollBarMover.on.call(this, this.$["scroller"]["vertical"], this.$["scroller"]["vertical-bar"], "vertical", e);
    }).bind(this))
    .on("dragstart", function (e) {
        U.stopEvent(e);
        return false;
    });


this.$["scroller"]["vertical"]
    .on("click", (function (e) {
        if (e.target.getAttribute("data-ax5grid-scroller") == "vertical") {
            scrollBarMover.click.call(this, this.$["scroller"]["vertical"], this.$["scroller"]["vertical-bar"], "vertical", e);
        }
    }).bind(this));


this.$["scroller"]["horizontal-bar"]
    .on(GRID.util.ENM["mousedown"], (function (e) {
        this.xvar.mousePosition = GRID.util.getMousePosition(e);
        scrollBarMover.on.call(this, this.$["scroller"]["horizontal"], this.$["scroller"]["horizontal-bar"], "horizontal", e);
    }).bind(this))
    .on("dragstart", function (e) {
        U.stopEvent(e);

여기서 스크롤바 트랙을 클릭하는 사용자 이벤트를 받아서

github.com

ax5ui/ax5ui-kernel/blob/master/src/ax5ui-grid/src/modules/ax5grid-scroller.js#L96




            GRID.header.scrollTo.call(self, scrollPositon);
            GRID.body.scrollTo.call(self, scrollPositon);
        }


        return -left
    }
};


const scrollBarMover = {
    "click": function (track, bar, type, e) {


        // 마우스 무브 완료 타임과 클릭타임 차이가 20 보다 작으면 클릭이벤트 막기.
        if ((new Date()).getTime() - GRID.scroller.moveout_timer < 20) {
            return false;
        }


        let self = this,
            trackOffset = track.offset(),
            barBox = {
                width: bar.outerWidth(), height: bar.outerHeight()

여기서 스크롤바의 위치를 이동시키고 그 위치에 맞게 컨텐츠를 이동시키게 됩니다.

지금 원하시는 기능을 구현 하려면 config의 옵션으로 스크롤바 클릭시 액션을 추가하고 예외처리 하면 가능하겠습니다.

maq · 9월 24, 2019, 7:25오전

동작하는 원리는 알았는데 scrollBarMover 안에 function vertical과 this.$[“scroller”][“vertical”] 같은 함수를 만들어서 사용하라는 말씀이신가요? 내용 이해가 잘 되지 않습니다…