Question: I am trying to recreate the [Monocle ereader](https://github.com/joseph/Monocle/). As best I understand, it works by columnating the page and then scrolling horizontally across the columns.

I have the following HTML and Javascript:

```
body {
  column-width: 100vw;
  max-height: calc(100vh - 30px);
  box-sizing: border-box;
}

window.addEventListener(
  'wheel',
  (evt) => {
    const delta = evt.deltaX + evt.deltaY
    const pages = Math.round(Math.abs(delta) / delta)
    const curr = Math.round(window.scrollX / window.innerWidth)
    window.scroll((curr + pages) * window.innerWidth, 0)
  }
)

```

As [this pen](https://codepen.io/dysbulic/pen/GRJgmNY) shows when you scroll, as the pages progress, the text drifts to the left.

Answer: 
It looks like it's drifting due to the vertical scrollbar on the right. For me, adding `overflow-y: hidden;` to the body's css to hide the scrollbar seemed to do the trick.

If you need to have the scrollbar there, you might need to calculate the scrollbar width and add/subtract it to compensate. More info on doing that here: <https://stackoverflow.com/a/13382873/6184972>
Poor browser has to repaint for every instance of a 'wheel' event! Try console logging for each wheel event, you'll see it's pretty frequent! Try reducing the number of times the browser has to repaint. It'll be a balancing act between a smooth scroll and a better performance:

```
let counter = 0;
const buffer = 3;  // I made this a variable so you can easily see what it is and change it
window.addEventListener(
  'wheel',
  (evt) => {
    const delta = evt.deltaX + evt.deltaY
    const pages = Math.round(Math.abs(delta) / delta)
    const curr = Math.round(window.scrollX / window.innerWidth)
    let scrollAmount = (curr + pages) * window.innerWidth
      if (scrollAmount >= (counter + buffer)) {
        window.scroll(scrollAmount, 0)
        counter = scrollAmount
      }
  }
)

```