JavaScriptで水平スクロールバーの高さ、または垂直スクロールバーの幅を決定するにはどうすればよいですか?
JavaScriptで水平スクロールバーの高さ、または垂直スクロールバーの幅を決定するにはどうすればよいですか?
回答:
Alexandre Gomesブログから、 私はそれを試していません。それがあなたのために働くかどうか私に知らせてください。
function getScrollBarWidth () {
var inner = document.createElement('p');
inner.style.width = "100%";
inner.style.height = "200px";
var outer = document.createElement('div');
outer.style.position = "absolute";
outer.style.top = "0px";
outer.style.left = "0px";
outer.style.visibility = "hidden";
outer.style.width = "200px";
outer.style.height = "150px";
outer.style.overflow = "hidden";
outer.appendChild (inner);
document.body.appendChild (outer);
var w1 = inner.offsetWidth;
outer.style.overflow = 'scroll';
var w2 = inner.offsetWidth;
if (w1 == w2) w2 = outer.clientWidth;
document.body.removeChild (outer);
return (w1 - w2);
};
jQueryを使用すると、Matthew Vinesの回答を次のように短縮できます。
function getScrollBarWidth () {
var $outer = $('<div>').css({visibility: 'hidden', width: 100, overflow: 'scroll'}).appendTo('body'),
widthWithScroll = $('<div>').css({width: '100%'}).appendTo($outer).outerWidth();
$outer.remove();
return 100 - widthWithScroll;
};
これは私が見つけた唯一のスクリプトで、webkitブラウザで動作しています... :)
$.scrollbarWidth = function() {
var parent, child, width;
if(width===undefined) {
parent = $('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo('body');
child=parent.children();
width=child.innerWidth()-child.height(99).innerWidth();
parent.remove();
}
return width;
};
最小化バージョン:
$.scrollbarWidth=function(){var a,b,c;if(c===undefined){a=$('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo('body');b=a.children();c=b.innerWidth()-b.height(99).innerWidth();a.remove()}return c};
そして、ドキュメントの準備ができたら、それを呼び出す必要があります...
$(function(){ console.log($.scrollbarWidth()); });
最新のFF、Chrome、IE、SafariでWindows 7で2012-03-28をテストし、100%動作。
ソース:http : //benalman.com/projects/jquery-misc-plugins/#scrollbarwidth
width
は常に ===未定義になります。その後の関数の呼び出しはすでに設定されているので、そのチェックは計算が不必要に再実行されるのを防ぐだけです。width
width
が、むしろそれを一つ一つ時間を再計算します。動作しますが、ひどく非効率的です。世界を支持し、代わりにアルマンのプラグインで正しいバージョンを使用してください。
単純な操作を探している場合は、単純なdom jsとjqueryを混ぜてください。
var swidth=(window.innerWidth-$(window).width());
現在のページのスクロールバーのサイズを返します。(表示されている場合、または0を返す場合)
window.scrollBarWidth = function() {
document.body.style.overflow = 'hidden';
var width = document.body.clientWidth;
document.body.style.overflow = 'scroll';
width -= document.body.clientWidth;
if(!width) width = document.body.offsetWidth - document.body.clientWidth;
document.body.style.overflow = '';
return width;
}
私にとって、最も便利な方法は
(window.innerWidth - document.getElementsByTagName('html')[0].clientWidth)
バニラJavaScript。
document.documentElement.clientWidth
。要素documentElement
を取得する意図をより明確かつ明確に表現し<html>
ます。
ページ自体ではなく、ページ内の要素に対して機能する簡単な解決策を見つけました。
$('#element')[0].offsetHeight - $('#element')[0].clientHeight
これは、x軸のスクロールバーの高さを返します。
以下からのデビッド・ウォルシュさんのブログ:
// Create the measurement node
var scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measure";
document.body.appendChild(scrollDiv);
// Get the scrollbar width
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
console.info(scrollbarWidth); // Mac: 15
// Delete the DIV
document.body.removeChild(scrollDiv);
.scrollbar-measure {
width: 100px;
height: 100px;
overflow: scroll;
position: absolute;
top: -9999px;
}
私のウェブサイトでは17、ここではStackoverflowで14をくれます。
スクロールバーが付いた要素がすでにある場合は、次を使用します。
function getScrollbarHeight(el) {
return el.getBoundingClientRect().height - el.scrollHeight;
};
horzintscrollbarが存在しない場合、関数は0を返します。
jquery + javascriptを使用window
してdocument
、以下のようにスクロールバーを決定できます。
var scrollbarWidth = ($(document).width() - window.innerWidth);
console.info("Window Scroll Bar Width=" + scrollbarWidth );
そのAntiscroll.js
コードでそれを行う方法は次のとおりです。
function scrollbarSize () {
var div = $(
'<div class="antiscroll-inner" style="width:50px;height:50px;overflow-y:scroll;'
+ 'position:absolute;top:-200px;left:-200px;"><div style="height:100px;width:100%"/>'
+ '</div>'
);
$('body').append(div);
var w1 = $(div).innerWidth();
var w2 = $('div', div).innerWidth();
$(div).remove();
return w1 - w2;
};
コードはここからです:https : //github.com/LearnBoost/antiscroll/blob/master/antiscroll.js#L447
detectScrollbarWidthHeight: function() {
var div = document.createElement("div");
div.style.overflow = "scroll";
div.style.visibility = "hidden";
div.style.position = 'absolute';
div.style.width = '100px';
div.style.height = '100px';
document.body.appendChild(div);
return {
width: div.offsetWidth - div.clientWidth,
height: div.offsetHeight - div.clientHeight
};
},
Chrome、FF、IE8、IE11でテスト済み。
空div
を作成し、それがすべてのページに存在することを確認します(つまり、header
テンプレートに配置する)。
これにこのスタイルを与えます:
#scrollbar-helper {
// Hide it beyond the borders of the browser
position: absolute;
top: -100%;
// Make sure the scrollbar is always visible
overflow: scroll;
}
次に#scrollbar-helper
、JavaScript でのサイズを確認します。
var scrollbarWidth = document.getElementById('scrollbar-helper').offsetWidth;
var scrollbarHeight = document.getElementById('scrollbar-helper').offsetHeight;
このように計算何もする必要は、div
常に持っていないだろうwidth
とheight
のscrollbar
。
唯一の欠点はdiv
、テンプレートが空になることです。しかし、その一方で、JavaScriptファイルはコードが1行または2行しかかからないため、よりクリーンになります。
function getWindowScrollBarHeight() {
let bodyStyle = window.getComputedStyle(document.body);
let fullHeight = document.body.scrollHeight;
let contentsHeight = document.body.getBoundingClientRect().height;
let marginTop = parseInt(bodyStyle.getPropertyValue('margin-top'), 10);
let marginBottom = parseInt(bodyStyle.getPropertyValue('margin-bottom'), 10);
return fullHeight - contentHeight - marginTop - marginBottom;
}
jqueryを使用(Firefoxでのみテスト):
function getScrollBarHeight() {
var jTest = $('<div style="display:none;width:50px;overflow: scroll"><div style="width:100px;"><br /><br /></div></div>');
$('body').append(jTest);
var h = jTest.innerHeight();
jTest.css({
overflow: 'auto',
width: '200px'
});
var h2 = jTest.innerHeight();
return h - h2;
}
function getScrollBarWidth() {
var jTest = $('<div style="display:none;height:50px;overflow: scroll"><div style="height:100px;"></div></div>');
$('body').append(jTest);
var w = jTest.innerWidth();
jTest.css({
overflow: 'auto',
height: '200px'
});
var w2 = jTest.innerWidth();
return w - w2;
}
しかし、私は実際には@Steveの答えの方が好きです。
これは素晴らしい答えです:https : //stackoverflow.com/a/986977/5914609
しかし、私の場合はうまくいきませんでした。そして、私は何時間もかけてソリューションを探しました。
最後に、上のコードに戻って、各スタイルに!importantを追加しました。そしてそれはうまくいった。
元の回答の下にコメントを追加できません。だからここに修正があります:
function getScrollBarWidth () {
var inner = document.createElement('p');
inner.style.width = "100% !important";
inner.style.height = "200px !important";
var outer = document.createElement('div');
outer.style.position = "absolute !important";
outer.style.top = "0px !important";
outer.style.left = "0px !important";
outer.style.visibility = "hidden !important";
outer.style.width = "200px !important";
outer.style.height = "150px !important";
outer.style.overflow = "hidden !important";
outer.appendChild (inner);
document.body.appendChild (outer);
var w1 = inner.offsetWidth;
outer.style.overflow = 'scroll !important';
var w2 = inner.offsetWidth;
if (w1 == w2) w2 = outer.clientWidth;
document.body.removeChild (outer);
return (w1 - w2);
};
このライフハックの決定により、ブラウザーのscrollY幅(バニラJavaScript)を見つける機会が与えられます。この例を使用すると、現在の設計概念に従ってスクロールする必要のない要素を含む、任意の要素の scrollY幅を取得できます。
getComputedScrollYWidth (el) {
let displayCSSValue ; // CSS value
let overflowYCSSValue; // CSS value
// SAVE current original STYLES values
{
displayCSSValue = el.style.display;
overflowYCSSValue = el.style.overflowY;
}
// SET TEMPORALLY styles values
{
el.style.display = 'block';
el.style.overflowY = 'scroll';
}
// SAVE SCROLL WIDTH of the current browser.
const scrollWidth = el.offsetWidth - el.clientWidth;
// REPLACE temporally STYLES values by original
{
el.style.display = displayCSSValue;
el.style.overflowY = overflowYCSSValue;
}
return scrollWidth;
}
オフセット幅の違いに基づく、より簡潔で読みやすいソリューションを次に示します。
function getScrollbarWidth(): number {
// Creating invisible container
const outer = document.createElement('div');
outer.style.visibility = 'hidden';
outer.style.overflow = 'scroll'; // forcing scrollbar to appear
outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps
document.body.appendChild(outer);
// Creating inner element and placing it in the container
const inner = document.createElement('div');
outer.appendChild(inner);
// Calculating difference between container's full width and the child width
const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);
// Removing temporary elements from the DOM
outer.parentNode.removeChild(outer);
return scrollbarWidth;
}
すでに私のライブラリでコーディングされているので、ここにあります:
var vScrollWidth = window.screen.width - window.document.documentElement.clientWidth;
の$(window).width()
代わりにjQuery を使用することもできwindow.document.documentElement.clientWidth
ます。
右側のFirefoxで開発者ツールを開いた場合は機能しませんが、下部のdevsウィンドウを開いた場合は機能しません。
window.screen
サポートされているquirksmode.org!
楽しんで!
それは動作するようですが、おそらくすべてのブラウザで動作するより簡単な解決策がありますか?
// Create the measurement node
var scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measure";
document.body.appendChild(scrollDiv);
// Get the scrollbar width
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
console.info(scrollbarWidth); // Mac: 15
// Delete the DIV
document.body.removeChild(scrollDiv);
.scrollbar-measure {
width: 100px;
height: 100px;
overflow: scroll;
position: absolute;
top: -9999px;
}