質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

3090閲覧

スクロールバーをクリックするイベント

apricot111

総合スコア1

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/11/06 02:55

編集2020/11/09 00:40

親ページから要素(test)のスクロールバーを一度だけクリックさせるjavascriptを作りたいと思っています。
調べながら以下のようにしてみましたが、クリックを発生させられません。
何かいいアイデアがありましたら教えていただけますようお願いいたします。
※testはelfsightというサービスを呼び出しています。このサービスで動画リストを表示させています。

〇HTML <head> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> </head> <script src="https://apps.elfsight.com/p/platform.js" defer></script> <div id="test"> <div class="elfsight-app-XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"></div> </div> <script src="test/test.js"></script> 〇test.js <script> // 現在の縦スクロール位置 var scrollPosition = document.getElementById("test").scrollTop; // スクロール要素の高さ var scrollHeight = document.getElementById("test").scrollHeight; //スクロール移動(クリックできればいいのですが、そこがよくわからないです) document.getElementById("test").scrollTop = scrollHeight; //上記に修正 //$('#test').mousedown(function(event) { // switch (event.which) { // case 2: // break; // } //}); </script> 〇elfsightサービス内CSS /*ドロップダウン プレイリスト*/ .test-playlist-videos-component { position: absolute; width:300px; height:320px; background-color: transparent; overflow-y:scroll; will-change:auto; border: 1px solid #ddd; padding:3px; margin:0; } /*ドロップダウン スクロールバー*/ .test-playlist-videos-component::-webkit-scrollbar { width: 15px; height: auto; background:#eee; }

どうぞよろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/11/06 03:18

「クリック」のイベントはどこに書かれているのでしょう。 あと「調べながら」はどこをどう調べたのか、参考記事のURLなどご提示ください。
apricot111

2020/11/06 06:32 編集

早速ありがとうございます。 「スクロールバー イベント クリック」などで検索しながら試しています。 特にこれというものが探せず、検索する用語などが違うのかなと質問いたしました。 ひとまずこちらのhttps://teratail.com/questions/94152 の内容を上記コードに追記いたしました。 その他、何かございましたらどうぞよろしくお願いいたします。
guest

回答2

0

ベストアンサー

elfsightというサービスの仕組みがよくわかっていないので当て推量ですが、iframeをつかった埋め込みをしているのかもしれません。その場合iframeから直接clickイベントを拾うことはできません。

この辺も参照してみてください。
https://teratail.com/questions/40316#reply-64616

ただ、iframeの中のdocumentを外から触れるかはセキュリティ絡みで許可されない場合があるので、うまくいくかどうかは不明です。

投稿2020/11/14 00:16

otolab

総合スコア767

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

apricot111

2020/11/16 00:41

ありがとうございます。 できるかできないか分からないことだったのですごく参考になりました。 URLありがとうございました!
guest

0

JavaScript部分の記述部分がjQueryの型になっているので、HTMLの<head>部分にjQueryを読み込ませないとイベントが発生しません。

jQueryをHTMLに組み込む

投稿2020/11/06 03:06

itzuakniami123

総合スコア74

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

apricot111

2020/11/06 03:16

早速ありがとうございます。 読み込みはしていたのですが、上記コード欄に追記いたしました。
itzuakniami123

2020/11/06 03:21

ちなみにCSSの記述はされていますか? HTMLでdiv要素を作成しても、画面上は真っ白なので検証しようがありません…。
apricot111

2020/11/06 03:42

ありがとうございます。小出しになりすみません。 コード部分に追記いたしました。外部サービスを呼び出しています。 そのサービスで表示させているスクロールバーを自動でクリックできないかと思っています。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問