5 Replies - 234 Views - Last Post: 02 November 2017 - 06:41 PM

#1 CTphpnwb  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3714
  • View blog
  • Posts: 13,472
  • Joined: 08-August 08

get scroll bar widths

Posted 02 November 2017 - 12:02 PM

Lots of functions out there claim to return the width of scroll bars on the browser, but all I've tried return 0 in Safari, Chrome, and Firefox.
Here's a couple:
$.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;
};


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;
};


Anyone know one that works?

Is This A Good Question/Topic? 0
  • +

Replies To: get scroll bar widths

#2 CTphpnwb  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3714
  • View blog
  • Posts: 13,472
  • Joined: 08-August 08

Re: get scroll bar widths

Posted 02 November 2017 - 12:08 PM

Ugh. It turns out those functions will work, but only if the scroll bars are set to always show (at least on a Mac).
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is online

  • the case is sol-ved
  • member icon

Reputation: 6379
  • View blog
  • Posts: 25,770
  • Joined: 12-December 12

Re: get scroll bar widths

Posted 02 November 2017 - 12:22 PM

I obviously don't know any details beyond your question, but my immediate impression is that it is a concern if you need to discover the width of the scrollbar. A consideration that jumps out is to alter your design and/or content so that the precise width isn't a concern.

(A second, related consideration, is UX. If the content is so tightly measured that the scrollbar width is a concern, then the content flow needs more room.)
Was This Post Helpful? 0
  • +
  • -

#4 CTphpnwb  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3714
  • View blog
  • Posts: 13,472
  • Joined: 08-August 08

Re: get scroll bar widths

Posted 02 November 2017 - 01:13 PM

I wanted a graphic background to go to the bottom of the window, and objects would "bounce" off the sides without going past them. I can change the size to leave a buffer, but that effectively destroys the look I was going for. It seems that browser scrollbars are 15px, so when the function would return 0 I'm having it use 15 as a "sort of" fix.
Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is online

  • the case is sol-ved
  • member icon

Reputation: 6379
  • View blog
  • Posts: 25,770
  • Joined: 12-December 12

Re: get scroll bar widths

Posted 02 November 2017 - 02:26 PM

I was curious and tried a little experiment: floating an element left, applying a scrollbar to its container, then measuring the difference between offsetWidth before and after. I also wanted to check that it works with the elements not being visible (as it should).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Some Title</title>
<style type="text/css">
div {
    width: 100px;
    height: 50px;
    border: 1px solid red;
}
#contain {
    overflow: scroll;
}
#hiddid {
    visibility: hidden;
}
span {
    float: right;
    border: 1px solid green;
}
</style>
</head>
<body>
<div id="hiddid">
    <div id="contain">
        <span>hello</span>
    </div>
    <div>
        <span id="doh">hello</span>
    </div>
</div>
<script type="text/javascript">
console.log(document.querySelector("span").offsetLeft); // 59
console.log(document.querySelector("#doh").offsetLeft); // 76
</script>
</body>
</html>

To remove the element redundancy I'd probably try creating and appending a small floated element to any container, determining the difference and removing (or display: none) the inserted element. This only needs to happen once, briefly, to determine the scrollbar width for the current browser.

I only tried it in Google Chrome.

On reflection, this is similar to the code attempts you've posted, except using float rather than width 100%.

View PostCTphpnwb, on 02 November 2017 - 07:08 PM, said:

Ugh. It turns out those functions will work, but only if the scroll bars are set to always show (at least on a Mac).

Presumably the scrollbars are showing? Anyway, the measurement only needs to be taken once and stored, whether the scrollbars will remain or not.
Was This Post Helpful? 0
  • +
  • -

#6 CTphpnwb  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3714
  • View blog
  • Posts: 13,472
  • Joined: 08-August 08

Re: get scroll bar widths

Posted 02 November 2017 - 06:41 PM

The default behavior for OS X is to hide the scrollbars when not in use, so apparently the browser knows they're there, but Javascript doesn't see them.

Options for showing scroll bars are:
  • Automatically based on mouse or trackpad (default)
  • When scrolling
  • Always

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1