Is it possible to move the scrollbar of an entire page to the left side?

Is it feasible to shift a scrollbar of a div to the left side using simply direction:rtl? Why doesn't this same method work for the entire page?

I attempted applying the same CSS rule to both html and body, but it had no effect as the main scrollbar remained on the right-hand side.

(I'm aware of some alternative solutions like creating a fixed div with height and width = 100% and direction:rtl to act as a scrolling element instead of the main page, but is there a more direct way to address this issue?)

htmlcssbootstrap-4scrollbarright-to-left

Answer №1

Ensure all elements flow from left to right (ltr) except for the body which should flow from right to left (direction: rtl)

* {
  direction: ltr;
}

body {
  direction: rtl;
}

For example: 

* {
  direction: ltr;
}

div {
  padding: 5rem;
}

body {
  direction: rtl;
}
<body>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Close the fullscreen modal automatically when clicking anywhere inside

Hey there, I'm facing an issue with a button that I want to trigger a full-screen section containing some inputs. I attempted to use Bootstrap's full-screen modal for this purpose, but encountered some challenges. When I clicked anywhere on the ...

javascripthtmlcssbootstrap-4bootstrap-modal

Looking to conceal an <hr> element using jQuery's slideToggle function and then reveal it when clicked once more

I recently embarked on my journey to learn jQuery. I encountered a challenge with a simple button that triggers the slideToggle function to show/hide a div. Directly above this toggled div, there is an break line which I want to hide when the button is in ...

javascriptjqueryhtmlcss

Ways to stop Content from Showing below a div container

Hey, I just created a login panel using CSS and HTML. After applying some floats, all the content ended up displaying under the panel. I attempted to use clear: both, but that didn't resolve the issue. My goal is to have all other contents displayed a ...

htmlcss

Exploring the capabilities of soup.find() for achieving partial matches

I've been struggling to find an answer to this issue elsewhere, so I'm turning to this code: soup.find(text="Dimensions").find_next().text to extract the text after "Dimensions". The problem arises on the website I'm scraping beca ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

Send data from external sources into a Modal component in AngularJs

I'm feeling quite perplexed by this. <div ng-repeat="video in currentExercise.exercise.related.videos" style="margin:auto"> <img height="220" ng-src="https://i.ytimg.com/vi/{{video}}/maxresdefault.jpg" ng-click='open()'/> ...

javascripthtmlangularjsangular-bootstrap

The div's background height doesn't adjust according to the content in my project, and I'm struggling to fix it

On industrukt.pl/dev/ap/barbara.html, I am struggling to make the background color of the article section extend 100% of the photos. Currently, I have set a constant height value, but this solution is not ideal. When the browser window is resized to mobile ...

htmlcssbackground

submitting data in php from a database table

On my HTML page, I have fields where I input information and then post all the values in PHP. Here is the HTML code: <form action='preViewTallyHdr.php' method='POST' target='_blank'> <p>Supplier Name & ...

phphtmlarrayspost

"Enhancing button design with an adjacent image - the step-by

I am having an issue with my hover dropdown menu where the image is not displaying properly in the main button. When I hover over the user12345 button, the image appears on the left side just before the hover shadow. Below is the code snippet for the dropd ...

htmlcss

emulating an android device to test html5 applications

Recently, I embarked on developing an HTML5 game with the help of VS Code. I envision it being predominantly accessed from PCs and laptops. I successfully configured the Chrome debugger to facilitate debugging the webpage in Chrome. However, I am eager to ...

androidhtmlemulation

Tips for optimizing Jquery selectors to streamline recurring functions

I have 9 "service node" divs in my HTML code, each containing a hidden div and a button that triggers the rotation of the button by 45 degrees and reveals the hidden div. The challenge I am facing is that I have been using repetitive functions for each ser ...

htmljquerycssfunctionjquery-selectors

Steps for downloading a PDF file in PHP from a MySQL-stored path

I have developed a script that allows me to write PDF files to the server. The script sends the file to a specific directory named DATA and then stores the filename in a MySQL database. $target = "data/"; $target = $target . basename( $_FILES['file& ...

phphtmlmysql

Utilize @Html.TextBox helper to include extra GET parameters

I have a webpage that includes a text input field, table, and pager. The text input is used to determine the number of rows displayed in the table per page. Here is the code for the view: @using (Html.BeginForm("Index", "Read", FormMethod.Get)) { ...

c#htmlasp.net-mvcasp.net-mvc-4razor

Is a CSS-only autoexpanding label possible within a list?

I am interested in having all the labels automatically expand to the size of the widest one. Below is the HTML structure: <div class="body"> <ul class="list"> <li> <span> <label>condition</label> ...

htmlcss

How can I align two inner boxes vertically in the most efficient manner?

.dd{ height:100px; width:100%; border:1px soild red; background:#000; } .dd .d1{ height:20px; width:20px; border:1px solid green; display:inline-block; } .dd .d2{ height:20px; width:20px; border:1px solid green; display:inl ...

javascriptcssalignmentvertical-alignment

How can I use JavaScript to add a search text to the selectpicker searchbox in Bootstrap, and then automatically display the search results in the dropdown menu?

In the process of developing a web application with Razor Pages ASP.NET CORE 3.0, I have integrated a Bootstrap "selectpicker" dropdown with the attribute "data-live-search= true". The dropdown is populated with the names of employees from my model. Below ...

javascriptjquerybootstrap-4html-selectbootstrap-selectpicker

Color remains unchanged for selected value in dropdown menu

I'm facing a challenge in changing the color of the selected value in the dropdown menu. Each value has a different color, but when I select one, it reverts back to black. .appt-status select option[value="0"] { color: #3EA47B; } .appt-status o ...

cssbootstrap-4

Tab indicator modified to match the text's material design

I want the tab indicator to adjust its size based on the text. For example: https://i.sstatic.net/a8Y0I.png https://i.sstatic.net/xniMb.png Should I use JavaScript for this purpose? I am currently using Angular. Here is my HTML code: <div class="r ...

javascripthtmlcssangular

Animation will begin once the page has finished loading

On the website, there is a master page along with several content pages. The desired effect is to have a fade-in animation when navigating between pages. Currently, when clicking on a link, the new page appears first and then starts fading out, but this sh ...

jqueryasp.netcss

Avoiding the use of angle brackets in XSLT语

Looking to replace a sequence containing '.\s+\w+' with a line break This is what I currently have: <xsl:value-of select="replace($fdesc,'[.][ ]+\w+','<br/>')" /> However, I am encountering an er ...

htmlescapingxslt-2.0

Tips for Establishing Communication Between Two Dynamic Canvas Elements

How do I establish communication between two animated canvas elements? I have created two HTML5 canvas animations using Adobe Animate CC. Both of these animations are placed on a single HTML page. I am able to call functions from within the animations and ...

javascripthtmlcanvasadobe-animate