teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

jsのコードを追加いたしました。

2017/09/14 02:39

投稿

rishi
rishi

スコア14

title CHANGED
File without changes
body CHANGED
@@ -8,8 +8,8 @@
8
8
  実際に試してみたのですが縦のスクロールの量を取得しても高さがwindowの高さで固定なのでこれでは実現するのが難しいと思っています。
9
9
  jQueryのプラグインなどは使わない方法を探していますのでどなたかご教授の程よろしくお願いします。
10
10
 
11
+ 以下試してみたこと
11
12
 
12
-
13
13
  ```HTML
14
14
  <!DOCTYPE html>
15
15
  <html lang="ja">
@@ -20,7 +20,7 @@
20
20
  <title>水平スクロール</title>
21
21
  <link rel="stylesheet" href="css/style.css">
22
22
  <body>
23
- <div class="scrollcontens_wrap">
23
+ <div class="scrollcontens_wrap" style="margin-right:0px;">
24
24
  <p>Alphabetは横向きです。</p>
25
25
  <p>0123456789 数字も横向きです。</p>
26
26
  <p>「括弧」[brackets] ? ! @ = 記号も横向きです。日本語の括弧は縦向きです。</p>
@@ -90,7 +90,17 @@
90
90
  overflow-y: hidden;
91
91
  width: 3000px;
92
92
  }
93
+ ```
93
94
 
94
-
95
+ ```js
96
+ window.onscroll = function(){
97
+ //スクロールした際に横に動かしたい要素
98
+ var scrollcontens_mr = document.getElementsByClassName("scrollcontens_wrap")[0].style.marginRight;
99
+ //縦スクロールのスクロール量
100
+ var y = window.pageYOffset;
101
+ //横スクロールのスクロール量
102
+ scrollcontens_mr = y + "px";
103
+ console.log(scrollcontens_mr);
95
104
  }
105
+
96
106
  ```