縦スクロールの量を取得して要素のスタイルを変化させる方法

JavaScriptでwindowのスクロール量を取得して、それを指定した要素のスタイルを変化させたいと思っています。
ｲﾒｰｼﾞとしては下記のようなサイトです。

参考サイト
http://nenga.aisatsujo.jp/lp/eshi/

実際に試してみたのですが縦のスクロールの量を取得しても高さがwindowの高さで固定なのでこれでは実現するのが難しいと思っています。
jQueryのプラグインなどは使わない方法を探していますのでどなたかご教授の程よろしくお願いします。

以下試してみたこと

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <meta http-equiv="X-UA-Compatible" content="ie=edge">
7  <title>水平スクロール</title>
8  <link rel="stylesheet" href="css/style.css">
9  <body>
10    <div class="scrollcontens_wrap" style="margin-right:0px;">
11      <p>Alphabetは横向きです。</p>
12      <p>0123456789 数字も横向きです。</p>
13      <p>「括弧」[brackets] ? ! @ = 記号も横向きです。日本語の括弧は縦向きです。</p>
14      <p>© ㈱ ③ Ⅵ 特殊文字は文字、ブラウザによって異なります。</p>
15      <p>Alphabetは横向きです。</p>
16      <p>0123456789 数字も横向きです。</p>
17      <p>「括弧」[brackets] ? ! @ = 記号も横向きです。日本語の括弧は縦向きです。</p>
18      <p>© ㈱ ③ Ⅵ 特殊文字は文字、ブラウザによって異なります。</p>
19      <p>Alphabetは横向きです。</p>
20      <p>0123456789 数字も横向きです。</p>
21      <p>「括弧」[brackets] ? ! @ = 記号も横向きです。日本語の括弧は縦向きです。</p>
22      <p>© ㈱ ③ Ⅵ 特殊文字は文字、ブラウザによって異なります。</p>
23      <p>Alphabetは横向きです。</p>
24      <p>0123456789 数字も横向きです。</p>
25      <p>「括弧」[brackets] ? ! @ = 記号も横向きです。日本語の括弧は縦向きです。</p>
26      <p>© ㈱ ③ Ⅵ 特殊文字は文字、ブラウザによって異なります。</p>
27      <p>Alphabetは横向きです。</p>
28      <p>0123456789 数字も横向きです。</p>
29      <p>「括弧」[brackets] ? ! @ = 記号も横向きです。日本語の括弧は縦向きです。</p>
30      <p>© ㈱ ③ Ⅵ 特殊文字は文字、ブラウザによって異なります。</p>
31      <p>Alphabetは横向きです。</p>
32      <p>0123456789 数字も横向きです。</p>
33      <p>「括弧」[brackets] ? ! @ = 記号も横向きです。日本語の括弧は縦向きです。</p>
34      <p>© ㈱ ③ Ⅵ 特殊文字は文字、ブラウザによって異なります。</p>
35      <p>Alphabetは横向きです。</p>
36      <p>0123456789 数字も横向きです。</p>
37      <p>「括弧」[brackets] ? ! @ = 記号も横向きです。日本語の括弧は縦向きです。</p>
38      <p>© ㈱ ③ Ⅵ 特殊文字は文字、ブラウザによって異なります。</p>
39      <p>Alphabetは横向きです。</p>
40      <p>0123456789 数字も横向きです。</p>
41      <p>「括弧」[brackets] ? ! @ = 記号も横向きです。日本語の括弧は縦向きです。</p>
42      <p>© ㈱ ③ Ⅵ 特殊文字は文字、ブラウザによって異なります。</p>
43    </div>
44    <script src="js/scroll.js"></script>
45  </body>
46</html>
47

css
1html {
2  font-size: 17px;
3  line-height: 1.9;
4  letter-spacing: 0.03em;
5  writing-mode: vertical-rl;
6}
7
8html, body {
9  height: 100%;
10}
11
12body {
13  background: #fff;
14  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
15  font-size: 14px;
16  color: #000;
17  margin: 0;
18  padding: 0;
19}
20
21p {
22  text-indent: 1em;
23  margin-left: 30px;
24}
25
26.scrollcontens_wrap {
27  overflow-y: hidden;
28  width: 3000px;
29}

js
1window.onscroll = function(){
2  //スクロールした際に横に動かしたい要素
3  var scrollcontens_mr = document.getElementsByClassName("scrollcontens_wrap")[0].style.marginRight;
4  //縦スクロールのスクロール量
5  var y = window.pageYOffset;
6  //横スクロールのスクロール量
7  scrollcontens_mr = y + "px";
8  console.log(scrollcontens_mr);
9}
10