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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

3438閲覧

【css】overflow:scroll;で指定した範囲のスクロール領域が一部表示されません。。

yutaroshiraishi

総合スコア2

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/06/01 08:44

編集2021/06/02 01:16

前提・実現したいこと

webサイト上にて、<canvas>で作成した図をボタンで拡大縮小することができるサイトを作成しています。
また、拡大縮小する際は、<canvas>図の中央部分を基点に拡大縮小し、見ている箇所も中央部分をつねにフォーカスしているようにしたいです。

また、<canvas>の外側に設定した<div>にcssでoverflow:scroll;を指定し、スクロールして拡大したどの部分でも見れるようにする。
このようなサイトを作成しております。
ですが、overflow:scroll;で指定した範囲の図がスクロールできず、困っております。

※個人情報などがあるのですべて公開できず、申し訳ございません。
回答はあまり期待できないと思いますが、
何かご存じなこと、等ございましたら教えていただきたいです。。

発生している問題・エラーメッセージ

■エラーメッセージ
なし

■発生している問題
overflow:scroll;で指定した範囲の<canvas>図を拡大した際に発生します。
拡大すると、スクロールバーが出てくるのですが、拡大し続けると、図の左側と上部がどんどん隠れていきます。
スクロールバーを見てみると、右と下にしか行けなくなっており困っております。
隠れてしまう図の左側と上部をスクロールバーで移動して見れるようにしたく思っております。

該当のソースコード

html

1<table> 2 <tr> 3  <td> 4   <div class = "viewer"> 5    <div class = "menubar"> 6     <div class = "canvas-wrapper"> 7      <canvas width = "1664" height = "2335" class = "canvas"//ここは個人情報の為載せられません。> 8     </div> 9    </div> 10   </div> 11  </td> 12 </tr> 13</table> 14} 15

css

1.viewer { 2 box-shadow: 0 5px 10px rgba(0,0,0,0.19), 0 3px 3px rgba(0,0,0,0.23); 3 width: fit-content; 4 /* background-color: yellow; */ 5} 6.viewer .canvas-wrapper { 7 background-color: darkgray; 8 overflow: auto; 9 10 display: flex; 11 justify-content: flex-start; 12 align-items: center; 13 flex-direction: column; 14} 15.viewer .canvas { 16 max-width: 100%; 17 /* max-height: 100%; */ 18} 19 20.viewer .menubar { 21 display: flex; 22 justify-content: center; 23 align-items: center; 24 25 padding: 5px 0; 26 27 background-color: #fafafa; 28 width: 100%; 29 /* height: 25px; */ 30 /* height: 1.5em; */ 31} 32 33.viewer .button-wrapper { 34 display: flex; 35 justify-content: center; 36 align-items: center; 37 38 height: 100%; 39 margin: 0 1em; 40} 41 42.viewer .button-group { 43 margin: 0 0.7em; 44 height: 1.5em; 45 display: flex; 46 /* margin: auto; */ 47} 48 49.viewer .button-wrapper .Menubar-Button { 50 height: 100%; 51 width: 2.2em; 52 margin: 0 0.05em; 53 54 display: flex; 55 justify-content: center; 56 align-items: center; 57 58 color: black; 59 background-color: #fff; 60 61 border: 1px solid var(--TiffOne-accent-color); 62 border-radius: 2px; 63 box-sizing: border-box; 64 65 cursor: pointer; 66} 67 68 69.viewer .button-wrapper .Menubar-Button:hover { 70 color: white; 71 background-color: var(--TiffOne-accent-color); 72} 73 74 75.viewer .button-wrapper .Menubar-Button > * { 76 pointer-events: none; 77} 78 79.viewer .page-indicator { 80 width: auto; 81 min-width: 2.5em; 82 height: 100%; 83 margin: 0 0.05em; 84 85 text-align: center; 86 87 color: black; 88 background-color: #fff; 89 90 border: 1px solid var(--TiffOne-accent-color); 91 border-radius: 2px; 92 box-sizing: border-box; 93} 94 95.canvas-wrapper { 96 margin-left: 70px; 97}

試したこと

overflow: scroll;

補足情報(FW/ツールのバージョンなど)

<div class = "canvas-wrapper">について

<div class = "canvas-wrapper"></div>のheight,widthは固定しています。

■拡大縮小の方法について
jsを用いて拡大縮小しております。
お見せできない情報なのですが、
開発者ツールを用いてみてみると、ボタン押下後、cssに下記が追記される仕組みです。

canvas{
transform:scale(数値);
}

ボタンを押すごとに、数値の中には0.2~3あたりまでの足し引きされた数値が入るようにしています。初期値1

■jsの拡大縮小について
拡大縮小する際に、transform-origin:left topを設定すれば、
<canvas>の左上を基点として拡大縮小するので、
スクロールバーを使って<canvas>の図をすべて見ることができます。

しかし、↑の拡大縮小の方法ではなく、図の中央部分を基点として拡大縮小したいと考えていますので、transform-origin:left topは設定しておりません。

また、拡大縮小にはtransformを使わなくてはいけないわけではないので、他に良い方法があればご教示いただきたいです。

そして、この<canvas>図を表示するビューワーの作成方法についても、こだわっていません。
自分の要望が満たせればよいと考えております。
他に良い方法があれば教えていただきたいです。

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

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

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

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

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

K_3578

2021/06/01 08:53

orverflow → overflow >タイトル、本文
yutaroshiraishi

2021/06/02 00:17

ご指摘いただきありがとうございます。 修正いたしました。 助かりました。
guest

回答2

0

ベストアンサー

<div class = "canvas-wrapper"></div>の外にcanvasが出てしまっているのが原因の一つだと思います。

その他、

css

1.viewer .canvas { 2 max-width: 100%; 3 /* max-height: 100%; */ 4}

としているので、親要素に合わせて縮んでしまうとか、そもそもoverflowはwidthなどを指定しないと効かない、などの原因で、上記を修正後に上手くいかないと思います。


質問の修正を受けて追記

以下のようにするとどうでしょうか。

css

1canvas { 2 transform-origin: top left; 3}

投稿2021/06/01 09:09

編集2021/06/02 01:13
Lhankor_Mhy

総合スコア35865

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

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

yutaroshiraishi

2021/06/02 00:46

ご提供できる情報が少ない中、ご回答いただきましてありがとうございます!<m(__)m> <div class = "canvas-wrapper"></div>の外にcanvasが出てしまっていることが原因とのこと、承知いたしました。 例えばですが、<div class ="canvas-wrapper"></div>のwidthを730pxに設定し、 <canvas>のwidthを1600pxにした場合は、<canvas>の0pxから730pxまでの部分はカーソル移動できない。ということでしょうか?
Lhankor_Mhy

2021/06/02 00:50

上手く伝わっていない感じがします。 当方の申し上げたいことは、 <div class = "canvas-wrapper"></div> <canvas width = "1664" height = "2335" class = "canvas"//ここは個人情報の為載せられません。> となっているところは、 <div class = "canvas-wrapper"> <canvas width = "1664" height = "2335" class = "canvas"//ここは個人情報の為載せられません。> </div> とあるべきではないか、という話です。
yutaroshiraishi

2021/06/02 00:57

失礼いたしました。 理解いたしました。 確認したところ、実際のソースと異なっておりました。失礼いたしました。 こちらに書き写した時点で誤記していたようです。 正しく修正致しました。
Lhankor_Mhy

2021/06/02 01:12

問題を把握しました。
Lhankor_Mhy

2021/06/02 01:14

回答に追記しました。
yutaroshiraishi

2021/06/02 01:22

ありがとうございます。 申し訳ございません。要望が漏れていましたので追記しました。 拡大縮小は<canvas>の中央を基点としたいという要望がございます。 transform-origin: top left; だと、左上を基点にするので、見れるようになりますが、中央基点ではないので使えません。。<(_ _)>
Lhankor_Mhy

2021/06/02 01:36

後出し多くないっすか……?
yutaroshiraishi

2021/06/02 01:38 編集

そうですよね、今回はこちらでbaと致します。 また別口で質問しようと思います
Lhankor_Mhy

2021/06/02 01:47

そうすると、scaleで縮尺を変えると同時に Element.scroll() でスクロール位置を変えて、疑似的に中心基準で拡大するとかですかね……?
Lhankor_Mhy

2021/06/02 01:54 編集

いや、それだと、たぶん、縮小した時にややこしいか…… 縮小した時の、中央配置はどうやって実現してるんですか?
Lhankor_Mhy

2021/06/02 01:54

あれ?終わってる……?
Lhankor_Mhy

2021/06/02 01:56

ああ、別の質問を立てて、他の回答者に当たるのですね。 お役に立てず申し訳ない。
yutaroshiraishi

2021/06/02 02:58 編集

とんでもないです。ただ、毎回ご回答いただいてあと出しで質問が増えておりましたので、BAをつけさせていただきました! var element = document.getElementByClassName("canvas"); element.scroll(0,0); をjsに追記してみましたが、is not a function とエラーがでてきてしまうようです。。
yutaroshiraishi

2021/06/02 02:04

中央配置の実現ですが、transform:scale()で自動で<canvas>の中央を基点に拡大されるのでそれで実現しております!(回答になっておりますでしょうか。)
yutaroshiraishi

2021/06/02 02:05

Lhankor_Mhy様のおかげで、少し糸口が見えてきそうです。 ありがとうございます。
yutaroshiraishi

2021/06/02 02:35

ご回答ありがとうございます<(_ _)> 良いと思います! wrapper内部をスクロールしたいのですが、scroll()メソッドがjsで動作せず、、 上記にも記載していますが、 Uncaught TypeError:element.scroll is not a function at main.js.sizeUp と出てきます。sizeUpはmain.js内で拡大ボタんが押された際に呼び出される関数です。この中にtransfromやscrollを記載しました。
yutaroshiraishi

2021/06/02 02:58

おっしゃる通りです。 失礼いたしました。
yutaroshiraishi

2021/06/02 03:00

wrapper内部をスクロールさせる方法として、transform:translateX(50%);transform:translateY(50%);を追記してみたのですが、前述していたtransform:scale();が適用されなくなってしまいだめでした。。
Lhankor_Mhy

2021/06/02 03:45

getElementsByClassName は NodeList 的なものを返すのであって、Element を返さないですね。 いずれにせよ、新しい質問の方で議論していただいた方が有意義ではないかな、と感じています。
Lhankor_Mhy

2021/06/02 06:32

いえいえ。 何か思いついたらそちらの回答させていただきます。
yutaroshiraishi

2021/06/02 08:14

ありがとうございます<(_ _)><(_ _)>
guest

0

どのように拡大縮小をしているのか記載がありませんので、あくまでも憶測ですが、描画範囲をはみ出しているような気がします。

投稿2021/06/01 09:04

lohn

総合スコア93

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

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

lohn

2021/06/01 09:21

(canvas要素を拡縮しているのではなく、描画内容を拡縮しているのだろう、という推測を前提としています)
yutaroshiraishi

2021/06/02 00:50 編集

情報が少ない中、ご回答いただきありがとうございます。<(_ _)> jsを用いて拡大縮小しております。 お見せできない情報なのですが、 開発者ツールを用いてみてみると、ボタン押下後、cssに下記が追記されます。 canvas{ transform:scale(数値); } ボタンを押すごとに、数値の中には0.2~3あたりまでの足し引きされた数値が入るようにしています。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問