How to Wrap Table Cell td Content using CSS?

How to Change the Position of Scrollbar using CSS?

Last Updated : 11 Jan, 2025

Here are the Methods to Change the Position of the Scrollbar using CSS:

Method 1. Using the direction Property

The direction property specifies the text direction of an element’s content. Setting it to rtl (right-to-left) moves the scrollbar to the left side.

HTML

<html>
<head>
    <style>
        .scroll-left {
            direction: rtl;
            overflow-y: scroll;
            height: 150px;
            width: 300px;
            border: 1px solid #000;
        }
        .content {
            direction: ltr;
        }
    </style>
</head>
<body>
    <div class="scroll-left">
        <div class="content">
            This is a sample Code 
        </div>
    </div>
</body>
</html>

The .scroll-left class applies direction: rtl; to move the scrollbar to the left.
The inner .content div resets the text direction to left-to-right with direction: ltr;.

2. Using the transform Property

The transform property can rotate elements, effectively repositioning the scrollbar.

HTML

<html>
<head>
    <style>
        .scroll-left {
            transform: rotateY(180deg);
            overflow-y: scroll;
            height: 150px;
            width: 300px;
            border: 1px solid #000;
        }
        .content {
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
    <div class="scroll-left">
        <div class="content">
            This is sample code 
        </div>
    </div>
</body>
</html>

The .scroll-left class applies transform: rotateY(180deg); to flip the container, moving the scrollbar to the left.
The inner .content div reverses the flip to display content normally.

3. Using overflow-x and transform for Top Scrollbar

To position the scrollbar at the top, combine overflow-x with the transform property.

HTML

<html>
<head>
    <style>
        .scroll-top {
            overflow-x: auto;
            transform: rotate(180deg);
            height: 150px;
            width: 300px;
            border: 1px solid #000;
        }
        .content {
            transform: rotate(180deg);
        }
    </style>
</head>
<body>
    <div class="scroll-top">
        <div class="content">
         This is a sampel code 
        </div>
    </div>
</body>
</html>

The .scroll-top class applies transform: rotate(180deg); to flip the container, placing the scrollbar at the top.
The inner .content div reverses the flip to display content correctly.

How to Wrap Table Cell td Content using CSS?

aditya_taparia

Improve

Article Tags :

Similar Reads

How to get the position of scrollbar using JavaScript ?

JavaScript is an amazing language and there are many functions available through which we can access any element of the HTML page through javascript. There are some simple techniques to get the scrollbar position that are discussed below: Approach 1: Whenever the function getScroll() is encountered,

How to Change Style of Scrollbar using Tailwind CSS ?

By default, Tailwind CSS does not include built-in utilities for styling scrollbars. However, you can customize the appearance of scrollbars using traditional CSS in combination with Tailwind's utility classes. This is achieved by using the scrollbar-* classes to customize aspects like scrollbar wid

How to change style of elements on scroll using jQuery ?

We have given an HTML document containing some CSS properties, and the task is to change the CSS property to a particular element after scrolling the page using jQuery. To change the style of element on scroll, we get the number of pixels by which the content of an element has been scrolled horizont

How to Change Background Images on Scroll using CSS?

Background images are crucial in web development, significantly enhancing the user experience. Using background images on a webpage can effectively showcase a brand or convey specific messages. Here, we will explore how to change background images on scroll using CSS. ApproachThe HTML includes a spa

How to Get and Set Scroll Position of an Element using JavaScript ?

In this article, we will learn how to get and set the scroll position of an HTML element using JavaScript. Approach: We will be using the HTML DOM querySelector() and addEventListener() methods and the HTML DOM innerHTML, scrollTop and scrollLeft properties. We create an HTML div element with an id

How to make a Sidebar Sticky on Page Scroll using CSS ?

A Sticky Sidebar contains important links and navigation options fixed on the screen, making it easy for users to access them while scrolling down. This improves the user experience by saving them from scrolling back to the top of the page to find essential information. We have used two different wa

How to create a custom scrollbar using CSS ?

Scrollbars are common graphical user interface elements that allow users to navigate content beyond the visible area. By default, web browsers provide basic scrollbars with a predefined style. However, using HTML and CSS, you can customize the scrollbar to match your website's design better. Scrollb

How to Create Scrollable Horizontal Menu using CSS ?

The scrollable horizontal menu is suitable for various screen sizes. To create a scrollable horizontal menu using CSS, you can make use of the overflow property on a container. Syntax white-space: nowrapoverflow: auto;[GFGTABS] HTML <!DOCTYPE html> <html> <head> <style> div.s

How to get the height of scroll bar using JavaScript ?

To get the height of scroll bar we could use different approaches. In this article, we are given an HTML document and the task is to get the height of the scrollbar using JavaScript. Following are the different approaches to solving this problem which are discussed below: Table of Content Using Cont

How to create content area scrollable instead of the page using CSS ?

Making a particular content area scrollable is done by using CSS overflow property. There are different values in overflow property that are listed below. visible: The property indicates that it can be rendered outside the block box and it is not clipped.hidden: This property indicates that the over