投稿

12月, 2025の投稿を表示しています

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

 【 マウスでスクロールアンカリングをコントロールしたい 】に載せたデモのコード。 <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...
コメントを投稿
続きを読む