Руководство Javascript Scrollbars

window.scrollbars
Обнаружение полосы прокрутки

1. window.scrollbars

Свойство (property) window.scrollbars возвращает объект Scrollbars представляющий полосы прокрутки (scroll bars) окружающие Viewport браузера. Но вы почти не можете взаимдействовать с Scrollbars через Javascript так как он имеет очень мало API для вас.

window.scrollbars

// Or Simple:

scrollbars

scrollbars.visible

Объект Scrollbars имеет единственное свойство (property) это visible. Но данное свойство ненадежно, scrollbars.visible возвращает значение true, это не означает чтобы вы видите полосы прокрутки.

scrollbars-example.html

<!DOCTYPE html>
<html>
<head>
    <title>Scrollbars</title>
    <meta charset="UTF-8">
</head>
<body>
    <h3>scollbars.visible</h3>

    <br/><br/>
    <button onclick="alert(scrollbars.visible)">
        alert(scrollbars.visible)
    </button>

</body>
</html>

Example:

Например, используйте метод window.open(..) откройте новое окно без полосы прокрутки:

open-new-window-example.html

<!DOCTYPE html>
<html>
<head>
    <title>Scrollbars</title>
    <meta charset="UTF-8">
    <script>

        function openNewWindow()  {
           var winFeature = 'scrollbars=no,resizable=yes';

           // Open a New Windows.
           window.open('some-page.html','MyWinName',winFeature);
        }
    </script>
</head>
<body>
    <h3>Scrollbars</h3>

    <button onclick="openNewWindow()">
        Open a New Window without scrollbars
    </button>

</body>
</html>

some-page.html

<!DOCTYPE html>
<html>
<head>
    <title>Some Page</title>
    <meta charset="UTF-8">

      <style>
          /** CHROME: Make the scroll bar not appear */
          body {
             overflow: hidden;
          }
      </style>
</head>
<body>
    <h3>Some Page</h3>
    
    <p>1</p>
    <p>1 2</p>
    <p>1 2 3</p>
    <p>1 2 3 4</p>
    <p>1 2 3 4 5</p>
    <p>1 2 3 4 5 6</p>
    <p>1 2 3 4 5 6 7</p>
</body>
</html>

Example:

Например, как сделать так, чтобы полосы прокрутки никогда не отображались?

no-scrollbars-example.html

<!DOCTYPE html>
<html>
<head>
    <title>Scrollbars</title>
    <meta charset="UTF-8">
    <style>
        body {
           overflow: hidden;
        }
    </style>
</head>
<body>
    <h3>No Scrollbars</h3>

    <p>1</p>
    <p>1 2</p>
    <p>1 2 3</p>
    <p>1 2 3 4</p>
    <p>1 2 3 4 5</p>
    <p>1 2 3 4 5 6</p>
    <p>1 2 3 4 5 6 7</p>

</body>
</html>

2. Обнаружение полосы прокрутки

Иногда вы хотите обнаружить (detect) отображается ли полоса прокрутки определенного элемента или нет? Или хотите обнаружить полоса прокрутки у Viewport отображается или нет? Ниже является маленькая библиотека, которая может быть вам полезна в данной ситуации.

scrollbars-utils.js

// Private Function
// @axis: 'X', 'Y', 'x', 'y'
function __isScrollbarShowing__(domNode, axis, computedStyles) {
    axis = axis.toUpperCase();
    var type;

    if(axis === 'Y') {
         type = 'Height';
    } else {
         type = 'Width';
    }

    var scrollType = 'scroll' + type;
    var clientType = 'client' + type;
    var overflowAxis = 'overflow' + axis;

    var hasScroll = domNode[scrollType] > domNode[clientType];

    // Check the overflow and overflowY properties for "auto" and "visible" values
    var cStyle = computedStyles || window.getComputedStyle(domNode)
    return hasScroll && (cStyle[overflowAxis] == "visible"
                         || cStyle[overflowAxis] == "auto"
                         )
          || cStyle[overflowAxis] == "scroll";
}

// @domNode: Optional.
function isScrollbarXShowing(domNode)  {
    if(!domNode) {
       domNode = document.documentElement;
    }
    return __isScrollbarShowing__(domNode, 'x');
}

// @domNode: Optional.
function isScrollbarYShowing(domNode)  {
    if(!domNode) {
       domNode = document.documentElement;
    }
    return __isScrollbarShowing__(domNode, 'y');
}

// Scrollbar X or Scrollbar Y is showing?
// @domNode: Optional.
function isScrollbarShowing(domNode)  {
    return isScrollbarXShowing(domNode) || isScrollbarYShowing(domNode);
}

Например используйте библиотеку выше для обнаружения полосы прокрутки у Viewport.

detect-scollbars-example.html

<!DOCTYPE html>
<html>
<head>
    <title>Scrollbars</title>
    <meta charset="UTF-8">

    <script src="scrollbars-utils.js"></script>

</head>
<body>
    <h3>Detect Scrollbars</h3>

    <br/>
    <button onclick="alert(isScrollbarXShowing())">
        Is Scrollbar X Showing?
    </button>

    <button onclick="alert(isScrollbarYShowing())">
        Is Scrollbar Y Showing?
    </button>

    <br/><br/>
    <hr style="width: 500px;"/>

    <p>1</p>
    <p>1 2</p>
    <p>1 2 3</p>
    <p>1 2 3 4</p>
    <p>1 2 3 4 5</p>

</body>
</html>

Например, обнаружить (detect) полосу прокрутки элемента <div>:

detect-div-scrollbars-example.html

<!DOCTYPE html>
<html>
<head>
    <title>Scrollbars</title>
    <meta charset="UTF-8">

    <style>
       #my-div {
         border: 1px solid blue;
         overflow-x: auto;
         padding: 5px;
         width: 150px;
         height: 80px;
       }
    </style>
    <script src="scrollbars-utils.js"></script>

    <script>
        function detectScrollbarXOfDiv()  {
           var domNode = document.getElementById("my-div");
           var scX = isScrollbarXShowing(domNode);
           var scY = isScrollbarYShowing(domNode);

           alert("Is Div Scrollbar X Showing? " + scX);
        }
    </script>

</head>
<body>
    <h3>Detect Scrollbars of an Element</h3>

    <br/>
    <button onclick="detectScrollbarXOfDiv()">
        Is Div Scrollbar X Showing?
    </button>

    <p>Div:</p>

    <div id="my-div">
      <br>
      <hr style="width:200px"/>
      <br>
    </div>


</body>
</html>

Руководство Javascript Scrollbars

1. window.scrollbars

2. Обнаружение полосы прокрутки

Pуководства ECMAScript, Javascript

Pуководства ECMAScript, Javascript

Новейшие статьи