投稿

10月, 2023の投稿を表示しています

スクロールアンカリングを無効にするコードが機能するかどうかのテストコード

 スクロールアンカリングを無効にするコードが機能するかどうかのテストコード スクロールアンカリングの紹介 - CSS: カスケーディングスタイルシート | MDN https://developer.mozilla.org/ja/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring あるノードがアンカーとして適切でないと思われる場合は、以下のように overflow-anchor を使用してそのノードを除外することができます。 無効にする必要がある場合は 仕様書では、新しいプロパティである overflow-anchor を追加し、スクロールアンカリングを文書全体、もしくは一部で無効にできるようにしています。基本的には、自動的に有効にされたスクロールアンカリングをオプトアウトする仕組みです。 指定できる値は、 auto または none のどちらかです。 auto が初期値です。対応しているブラウザーでは、スクロールアンカリングの動作をします。そして、コンテンツの急な移動も少なくなります。 none は、文書全体、もしくは一部でスクロールアンカリングを明示的にオプトアウトするための値です。 文書全体でスクロールアンカリングを無効にするには、 <body> 要素にこのプロパティを指定してください。 メモ: 仕様書にも書かれていますが、スクロールアンカリングが無効にされた場合、その子孫要素から再び有効にすることはできません。例えば、スクロールアンカリングが文書全体で無効にされた際、文書内の一部に overflow-anchor: auto を指定しても、その部分でスクロールアンカリングは動作しません。  CSS Scroll Anchoring Module Level 1 https://drafts.csswg.org/css-scroll-anchoring/#exclusion-api Note: It is not possible to turn scroll anchoring "back on" for descendants of a overflow-anchor: none element. However, descendant s
コメントを投稿
続きを読む

メールソフトみたいなコード

 メールソフトみたいなコード  <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>メールソフトみたいなコード</title> <style> #content-container {     width:300px;     height:500px;     border:1px solid gray; padding:5px; } #content-top {     height:30px;     display:flex; } #content {     height:470px;     overflow-y:auto; } #content-body {     line-height:20em;     border:1px solid gray; padding:5px; } #content-bottom {     height:20px; } #button-container {     height:100px;     width:300px;     border:1px solid gray; padding:5px;     overflow-x: hidden;     overflow-y: scroll; } .button{     width:300px;     border-bottom:1px solid gray;     padding:5px; } </style> <script> // メールデータ（通常はサーバーから取得） const email1 = {     subject: "一つ目",     body: '一つ目のコンテンツ１行目<br>一つ目のコンテンツ２行目<br>一つ目のコンテンツ３行目<br>', }; const email2 = {     subject: "二つ目",     body: '二つ目のコンテンツ１行目<br>二つ目の
コメントを投稿
続きを読む

iframeを使わずにコンテンツを切り替える

 　iframeの中に表示するコンテンツを切り替えるコードのようなiframeを使わないコード、要するにiframeを使わずにコンテンツを切り替えるJavaScript。 // HTML <div id="content"></div> <button onclick="changeContent('Hello, World!')">Click me</button> // JavaScript function changeContent(newContent) { document.getElementById('content').innerHTML = newContent; } サンプル  test20231028-1.html  <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>コンテンツを切り替えてもスクロールが維持されてしまう問題</title> <style> #content {     height:100px;     width:300px;     overflow-y:scroll;     line-height:3em; } .button{     width:300px;     border:1px solid gray;     padding:5px; } </style> </head> <body> <div id="content"> <p>下のボタンでコンテンツ変更</p> </div> <div class="button" onclick="changeContent('一つ目のコンテンツ１行目&lt;br&gt;一つ目のコンテンツ２行目&lt;br&gt;一つ目のコンテンツ３行目&lt;br&
コメントを投稿
続きを読む

onloadでiframeに追加したsandbox属性が無視される。

対処法：ChromiumベースのブラウザやIEでは iframe を含むページが先頭から表示されない場合がある。（iframe で開くページのURLに「#～」があると起こる） の続きのようなもの。 そもそもの発端 「 iframe を含むページが先頭から表示されない場合がある。（「#～」との関係） 」  そこ対処法でiframeにsandbox属性を追加することにしたが、iframeの中を切り替える必要が生じて、そのうちの一つがGoogleカレンダーで、Googleカレンダーを埋め込みたいが、sandbox属性が邪魔をする。 test3-1-0.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>バグ？</title> </head> <body> <div style="height:200px;"> バナー、ヘッダなど。 </div> <div style="height:250px;"> <h4>↓↓↓iframe↓↓↓</h4> <iframe src="test00-0.html#y500" name="test00" id="test00" title="test00" sandbox="allow-popups allow-popups-to-escape-sandbox allow-scripts"></iframe> </div> <div style="height:1000px;"> <a href="test3-1-0.html">このページへのリンク</a><br> iframe内切替<br> [<a href="test00-0.html#y500" t
コメントを投稿
続きを読む