HTML file styled using mutli column layout with problem in javacript while moving betwen columns

I do apply css multi column layout style with some javascript on html click in order to move between columns generated by css.

Here are the css file and js function.

var myWidth = 860;
var myGap =1000;
var webviewwidth = 860;




function getXYposition() {
    var x = event.clientX;
    var y = event.clientY;


    var k = webviewwidth / 2;
   
    //when clicking to the left
       if (x <= 100)
    {
        if (window.pageXOffset == 0 && document.getElementById("divb").scrollWidth > myWidth) {
            window.scrollBy((myWidth + myGap - 100  ), 0);
        }
        else if (window.pageXOffset == 0 && document.getElementById("divb").scrollWidth < myWidth ) {
            window.external.notify('next chapter');
                    }
        else if (window.pageXOffset != 0 && -(window.pageXOffset - (myWidth) - myGap) > (document.getElementById("divb").scrollWidth)) {
        window.external.notify('next chapter');
        }
        else if (window.pageXOffset != 0) {
            window.scrollBy((myWidth + myGap - 100), 0);
        }
    }
    // when clicking to the right
        else if (x >= webviewwidth-100)
    {
        if (window.pageXOffset != 0) {
            window.scrollBy(-(myWidth + myGap - 100), 0);
        }
        else if (window.pageXOffset == 0) {
           window.external.notify('previous chapter');
        }
    }



}

I do check X position and when body is clicked it do scroll either left or right accordingly.

html {
    height: 650px;
    font-size: 24px;
    width: 100%;
    overflow: scroll;
    overflow-y: scroll;
    overflow-x: hidden;
}
#divb {
     column-width: 640px;
 column-gap:1000px;
    column-rule: 1px solid red;
    height:620px;
       -ms-hyphens: auto;
    text-align:center;
      direction: rtl;
     padding-left:50px;
     padding-right:50px;

}

In html I have link to css file and to script. And js function is called from <html... onclick="getXYposition();">

All is working fine , css columns are correct .Js is moving between columns. But there is a problem wherever I click and it displays a new column it shifts the column info  a little bit to the left or right according to where I pressed. So the words inside the file will move and wont be all visible. Even though am moving exact amount each time but on each click it shifts text and this gap increases with each click.

What could be missing in my code?