Phương thức scrollLeft() trong jQuery

1) Phương thức scrollLeft() trong jQuery

- Phương thức scrollLeft() được dùng để:

• Lấy vị trí hiện tại của thanh cuộn nằm ngang của phần tử được chọn.
• Hoặc thiết lập lại vị trí hiện tại của thanh cuộn nằm ngang của phần tử được chọn.

2) Cách sử dụng phương thức scrollLeft() trong jQuery

- Đối với phương thức scrollLeft(), ta có ba trường hợp sử dụng tương ứng với ba loại cú pháp:

2.1) Lấy vị trí hiện tại của thanh cuộn nằm ngang

- Dưới đây là cú pháp dùng để lấy vị trí hiện tại của thanh cuộn nằm ngang của phần tử được chọn:

$(selector).scrollLeft()

- Lưu ý: Nếu bộ chọn tìm được nhiều phần tử trùng khớp thì phương thức scrollLeft() chỉ trả về vị trí của thanh cuộn nằm ngang của phần tử trùng khớp được tìm thấy đầu tiên.

- Lưu ý: Nếu thanh cuộn đang sát phía bên trái thì phương thức scrollLeft() sẽ trả về giá trị 0.

2.2) Thiết lập lại vị trí hiện tại của thanh cuộn nằm ngang

- Dưới đây là cú pháp dùng để thiết lập lại vị trí hiện tại của thanh cuộn nằm ngang của phần tử được chọn:

- Lưu ý: Cú pháp này thường được sử dụng trong trường hợp bộ chọn chỉ tìm được một phần tử trùng khớp duy nhất, hoặc bạn muốn thanh cuộn nằm ngang của tất cả các phần tử trùng khớp đều được thiết lập lại cùng một vị trí.

$(selector).scrollLeft(position);

2.3) Thiết lập lại vị trí hiện tại của thanh cuộn nằm ngang (sử dụng hàm)

- Dưới đây là cú pháp dùng để thiết lập lại vị trí hiện tại của thanh cuộn nằm ngang của phần tử được chọn bằng cách sử dụng hàm:

- Lưu ý: Cú pháp này thường được dùng trong trường hợp bộ chọn tìm được nhiều phần tử trùng khớp và bạn muốn thanh cuộn nằm ngang của mỗi phần tử trùng khớp được thiết lập một vị trí riêng.

$(selector).scrollLeft(function(index,currentposition){
    return position;
});

- Dưới đây là bảng mô tả ý nghĩa & cách sử dụng các tham số trong cú pháp trên:

3) Một số ví dụ

<script>
    $(document).ready(function(){
        $("button").click(function(){
            var position = $("div").scrollLeft();
            alert(position);
        });
    });
</script>

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("div").scrollLeft(100);
        });
    });
</script>

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("div").scrollLeft(function(n,p){
                if(n==0){return 30;}
                if(n==1){return p;}
                if(n==2){return 170;}
            });
        });
    });
</script>