広島、晴れのち晴れ

スクロールバーの幅を取得する

<pre> &NewLine;function getScrollbarWidth&lpar;&rpar; &lbrace; &NewLine; &NewLine;&Tab;&sol;&sol; Creating invisible container &NewLine;&Tab;const outer &equals; document&period;createElement&lpar;'div'&rpar;&semi; &NewLine;&Tab;outer&period;style&period;visibility &equals; 'hidden'&semi; &NewLine;&Tab;outer&period;style&period;overflow &equals; 'scroll'&semi; &sol;&sol; forcing scrollbar to appear &NewLine;&Tab;outer&period;style&period;msOverflowStyle &equals; 'scrollbar'&semi; &sol;&sol; needed for WinJS apps &NewLine;&Tab;document&period;body&period;appendChild&lpar;outer&rpar;&semi; &NewLine; &NewLine;&Tab;&sol;&sol; Creating inner element and placing it in the container &NewLine;&Tab;const inner &equals; document&period;createElement&lpar;'div'&rpar;&semi; &NewLine;&Tab;outer&period;appendChild&lpar;inner&rpar;&semi; &NewLine; &NewLine;&Tab;&sol;&sol; Calculating difference between container's full width and the child width &NewLine;&Tab;const scrollbarWidth &equals; &lpar;outer&period;offsetWidth - inner&period;offsetWidth&rpar;&semi; &NewLine; &NewLine;&Tab;&sol;&sol; Removing temporary elements from the DOM &NewLine;&Tab;outer&period;parentNode&period;removeChild&lpar;outer&rpar;&semi; &NewLine; &NewLine;&Tab;return scrollbarWidth&semi; &NewLine;&rcub; &NewLine;<&sol;pre>&NewLine;<hr>&NewLine;<p>参照元 <a href&equals;"https&colon;&sol;&sol;stackoverflow&period;com&sol;questions&sol;13382516&sol;getting-scroll-bar-width-using-javascript" rel&equals;"noopener noreferrer" target&equals;"&lowbar;blank">Getting scroll bar width using JavaScript<&sol;a><&sol;p>&NewLine;

モバイルバージョンを終了