Hướng dẫn và ví dụ Javascript Scrollbars

Xem thêm các chuyên mục:

Các hướng dẫn ECMAScript, Javascript

window.scrollbars
Phát hiện thanh cuộn

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.

Facebook

1- window.scrollbars

Thuộc tính (property) window.scrollbars trả về một đối tượng Scrollbars đại diện cho các thanh cuộn (scroll bars) bao quanh Viewport của trình duyệt. Tuy nhiên hầu như bạn không thể tương tác với Scrollbars thông qua Javascript vì nó có rất ít API cho bạn.


window.scrollbars

// Or Simple:

scrollbars

scrollbars.visible

Đối tượng Scrollbars có duy nhất một thuộc tính (property) là visible. Tuy nhiên thuộc tính này không đáng tin cậy, scrollbars.visible trả về giá trị true điều đó không có nghĩa là bạn đang nhìn thấy các thanh cuộn.

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:

Ví dụ, sử dụng phương thức window.open(..) mở ra một cửa sổ mới không có thanh cuộn:

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:

Ví dụ, Làm sao để các thanh cuộn không bao giờ hiển thị?

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- Phát hiện thanh cuộn

Đôi khi bạn muốn phát hiện (detect) thanh cuộn của 1 phần tử nào đó có đang hiển thị hay không? Hoặc muốn phát hiện thanh cuộn của Viewport có đang hiển thị hay không? Dưới đây là một thư viện nhỏ, nó có ích cho bạn trong trường hợp này.

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

Ví dụ, sử dụng thư viện trên để phát hiện thanh cuộn của 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>

Ví dụ, phát hiện (detect) thanh cuộn của phần tử <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>

Xem thêm các chuyên mục:

Các hướng dẫn ECMAScript, Javascript