投稿

デモ「マウスでスクロールアンカリングをコントロールしたい」のコード

 【 マウスでスクロールアンカリングをコントロールしたい 】に載せたデモのコード。 <div style="border:1px solid gray; padding:5px;"> <button onclick="startAutoAdd()">ボックス追加スタート</button> <button onclick="stopAutoAdd()">ストップ</button> <button onclick="startAutoRemove()">ボックス削除スタート</button> <div id="container20251229" style="overflow-anchor:auto;"> <pre class="child-box" style="height:auto;background-color:yellow;"> このボックス：class="child-box" 上に追加される追加ボックス：class="child-box" マウスでアンカーをコントロールするためのＣＳＳ .child-box { overflow-anchor: none !important; } .child-box:hover, .child-box:active, .child-box:focus-within {     overflow-anchor: auto !important; } </pre> <p style="margin-top:300px;background-color:yellow;">常に、overflow-anchor:auto;</p> </div> <button onclick="toggleScrollAnchor()">overflow-anchor:切替</button> <div id="st...
コメントを投稿
続きを読む

overflow-anchor確認ブックマークレット

　ほとんどのブラウザはCSS のプロパティoverflow-anchorのデフォルトがauto;だけど、特殊な事情でnone;にされていることがある。私も閲覧中のウェブページで一時的にnone;にすることがある。そして、実際にnone;になっているかどうか確認したい。そのためのブックマークレット。Geminiに作ってもらった。 overflow-anchor確認 　読みやすいように整形したコードは次の通り。 javascript: (function() {     'use strict';     // スタイルを取得するユーティリティ関数     const getStyle = (element, property) => {         return window.getComputedStyle(element).getPropertyValue(property);     };     const elements = document.querySelectorAll('*');     const results = [];     const overflowAnchorProperty = 'overflow-anchor';     // すべての要素を反復処理     elements.forEach(element => {         try {             const computedValue = getStyle(element, overflowAnchorProperty);             // overflow-anchorが 'none' の要素を検出             if (computedValue && computed...
コメントを投稿
続きを読む

隠れコンテンツのheightミスによるスクロール妨害のデモ

　一部のマストドンでmp3動画（映像はマストドンが付加）を含む投稿の下の投稿に移動した後にmp3動画の投稿に戻れないバグがあったので、それに似せたデモ。実際の原因は別にあるが、同じ対処法が使えた。   　下のコードでscroller内に見えなくなったarticleは内側のboxを削除し、articleタグにheightを記載する。scroller内に見えている場合はboxを生成し直し、articleタグにheightは削除される。各articleのheightはboxが存在する時に計算され170pxであるが、隠れてboxが存在しない場合も170pxが保たれる。ただし、「コンテンツ #2」だけは隠れている時のheightを修正できて、大きくすると、「コンテンツ #2」が隠れた後に「コンテンツ #2」を再表示しにくくなる。そのような時の対処法として「overflow-anchor: none;」がある。ただし、マストドンの方はスムーズにスクロールするが、このデモでは、揺れながらスクロールされる。 test20251213-1.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>スクロール妨害の再現と対処策のデモ</title> <style>     /* スクロールコンテナ */     .scroller {         height: 350px;         overflow-y: scroll;         border: 2px solid #3498db;         position: relative;     }     /* リスト全体 */     .list-container {         width: 100%;   ...
コメントを投稿
続きを読む

スクロールを邪魔する「スクロールスナップ」のデモコード（CSS）

 　いったん下にスクロールすると、上に戻りにくくなる、戻ろうとすると押し返されるバグを見かけたので、どのようなコードで実現できるか Gemini と相談してデモ用のコードを作った。 　スクロールスナップで実現できるようで、 最近ではcssで実現するらしい。JavaScriptを使ったデモのコードは前回書いた。 スクロールを邪魔する「スクロールスナップ」のデモコード（JavaScript） https://html-memo-hitorinezumi.blogspot.com/2025/12/scrollLockDemo.html 　ここでは、CSSを使った単純なコードを残しておく。JavaScriptを使ったデモと比べて吸着力が弱いが、スムーズにスクロールできないので鬱陶しくはある。   scrollLockDemoCSS.html  <!DOCTYPE html> <html lang="ja"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>CSS Scroll Snapによるセクション吸着</title>     <style>         /* ページ全体のリセット */         body { margin: 0; padding: 0; font-family: Arial, sans-serif; }         /* -------------------------------------- */         /* メインのスクロールコンテナ (親要素) */         /* -------------------------------...
コメントを投稿
続きを読む

スクロールを邪魔する「スクロールスナップ」のデモコード（JavaScript）

 　いったん下にスクロールすると、上に戻りにくくなる、戻ろうとすると押し返されるバグを見かけたので、どのようなコードで実現できるか Gemini と相談してデモ用のコードを作った。 　スクロールスナップで実現できるようで、 最近ではcssで実現するらしい。  Scroll snap (スクロールスナップ) - MDN Web Docs 用語集 | MDN https://developer.mozilla.org/ja/docs/Glossary/Scroll_snap CSS スクロールスナップ - CSS | MDN https://developer.mozilla.org/ja/docs/Web/CSS/Guides/Scroll_snap   　ここでは、JavaScriptで作ってみた。 scrollLockDemo.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ロック/非ロック混在 スナップバックデモ</title> <style>     body { margin: 0; padding: 0; }     /* スクロールコンテナは相対配置にし、絶対配置の子要素の基準とする */     .scroll-container {          height: 100vh;          width: 100vw;          overflow-y: scroll;          scroll-behavior: smooth;         position: relat...
コメントを投稿
続きを読む

短縮URLを展開するbatファイル

Gemini作 注意：Shift-JISで保存すること。普通にUTF-8で保存すると文字化けが生じる。 chcp 65001 > nul を使ってUTF-8で保存すると、日本語処理で問題が生じる可能性がある。 @echo off REM Use Shift-JIS / ANSI encoding for this bat file :START_LOOP echo. echo ========================================================== set /p short_url="展開したい短縮URLを入力してください: " echo ========================================================== echo. REM Check for empty input if "%short_url%"=="" (     echo 入力がありませんでした。再度入力してください。     goto START_LOOP ) echo 短縮URL: %short_url% echo リダイレクトの追跡を開始します... REM Core command: -L (follow redirects), -v (verbose output), -s (silent/no progress), -o nul (don't download content) REM Filter output for Location: and Host: headers curl -L -v -s -o nul "%short_url%" 2>&1 | findstr /i "Location: Host:" echo. echo 処理が完了しました。 :ASK_CONTINUE set /p continue_prompt="続けて別のURLを展開しますか？ (y/n): " REM y or Y to continue if /i "%continue_prompt%"=="y" goto START_LOO...
コメントを投稿
続きを読む

textareaが自動的に縦に伸び縮みするJavascript

 　textareaに入力した文字が増えた時に自動的に縦に伸びるコードはcssだけでは実現できないらしく、Javascriptが必要らしい。その為のコードをGeminiに教わったのだけど、外側にdivの枠があると、そのdivの高さを超えた場合にtextareaのスクロールバーだけでなく、その外側にdivのスクロールバーが現れて、見た目が悪いだけでなく使いにくくなる。そこで、Javascriptでtextareaが overflow:hidden; になるようにする。cssで overflow:hidden;にすると、Javascriptが無効な場合にスクロールバーが現れなくなるのでダメだそうだ。 　実験用のコードは次の通り。 <div style="width:300px; height:100%; overflow:auto; border:1px solid;"> <textarea id="autoResizeTextarea" style="resize:none; width:100%; min-height:100px; overflow:auto; "> １２３４５６７８９０１２３４５６７８９０１２３４５６７８９０ </textarea> </div> <script> document.addEventListener('DOMContentLoaded', () => {     const textarea = document.getElementById('autoResizeTextarea');     const minHeight = 100; // CSSのmin-heightと合わせる     textarea.style.overflow = 'hidden'; // textareaにスクロールバーが表示されないようにする     function adjustHeight() {         // textareaの文字が減った場合にサイズを縮める         textarea.sty...
コメントを投稿
続きを読む