Can a vertical scroll bar be placed on the left side of a DIV using CSS? What about JavaScript?
Can a vertical scroll bar be placed on the left side of a DIV using CSS? What about JavaScript?
For my straightforward requirement, I went with a simplistic approach using CSS:
<div style="direction: rtl; height: 250px; overflow: scroll;">
<div style="direction: ltr; padding: 3px;">
Place your content here
</div>
</div>
If you need a custom scrollbar, consider using JQuery in combination with the convenient plug-in known as JScrollPane
If you're looking for a completely native left scroll bar, I've created a jQuery plugin that can achieve just that.
Check out the Left Scrollbar Hack Demo to see it in action.
Here's a breakdown of how it works:
To calculate the content width (content_width) and then determine the scrollbar width, an inner div is injected inside the pane:
scrollbar_width = parent_width - content_width - horizontal_paddingTwo separate divs are placed inside the pane, both containing the content.
One functions as a "poser" solely for the scrollbar. By using a negative left margin, this div is shifted to the left to show only the scrollbar (the content beyond the edge is hidden).
The other div actually holds the visible scrolling content.
The next step involves connecting these two elements. Every 50ms with window.setInterval, the scrollTop offset from the "poser" div is applied to the visible scrolling content div. This way, scrolling up or down on the left scrollbar adjusts the content accordingly.
This explanation may not cover all the details, but here's the code snippet for the jQuery plugin:
$.fn.leftScrollbar = function(){
// Plugin code goes here
};
Simply include jQuery and the plugin on your page, then apply the left scroll bar like so:
$('#scrollme').leftScrollbar();
Just replace #scrollme with the CSS selector for the element(s) where you want the left scrollbars to appear.
And remember, this solution gracefully degrades for non-supported scenarios.
Is there a way to determine if a website is using a specific online JavaScript source, such as fontawesome? Some sources may only become apparent once they are actually loaded, rather than being visible in the website's source HTML. I attempted to us ...
I'm currently working on a project using React and Material UI. Seeking assistance on how to implement an animation for changing the size of a grid item. By default, the item is set to sm={3}, but when a user hovers over it, I want it to change to sm ...
When constructing select type questions for my web app using a JSON file, the code snippet for the select tag appears as follows: <div class="form-group" ng-class="{ 'has-error': form.$submitted && form[field.id].$invalid }" ng-if="fi ...
When attempting to upload files to a specific channel, they always end up being uploaded to the first tab or channel. I've been using useRef to try and fix this issue, but I'm not sure what exactly is missing. By "tab," I am referring to the tab ...
Currently, I am working on a web application that requires passing session?.user?.email from the useSession() function in next-auth/react to a server-side component. This server-side component will then execute a fetch request to /api/users/email/ to deter ...
Currently, I am working on a project that involves dealing with a legacy WebForms system. The system is gradually being updated to Angular 2, but the transition is happening incrementally. In order to effectively integrate information from the legacy sect ...
I have a function component in React that handles user login. The functionality is such that, based on the username and password entered by the user in the input fields, if the API response is true, it redirects to another page; otherwise, it remains on th ...
I need help embedding an iframe on my website, , to display the items I am selling on eBay. This is my first time attempting to create an iframe. ...
Imagine I have a random block of text displayed in a single line, like this: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Due to various reasons such as width settings or text-zoom, the text may display as two or more lines on the viewer&apos ...
Can anyone guide me on how to display a youtube video using a video.js player within vue.js? I'm new to integrations and not sure what it entails. Any assistance will be greatly appreciated. ...
I'm currently grappling with a design dilemma in typescript. Within my controller, I perform a validation process that can either return a 422 response, which ends the thread, or a validated data object that needs to be utilized further. Here's a ...
I am encountering an issue while sending a POST Request through the API in JavaScript. The method I have been using for multiple POST Requests is now displaying the error message: SyntaxError: Unexpected token W in JSON at position 0 Below is the snippet ...
I recently incorporated the "enscroll" javascript scroll bar into my webpage. You can find more information about it at <div id="enscroll_name"> <ul> <li id="p1">product1</li> <li id="p2">product2</li> ...
Below is a Material UI Table with columns set to a fixed size of 205px each, and the table itself set to 100% width. However, when there isn't enough space available, the columns do not shrink according to the text inside them, remaining stuck at 205p ...
I'm attempting to display the "left" and "right" divs side-by-side in the following example. However, they are not appearing next to each other as expected. Can someone point out my mistake? Thank you. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
I have encountered an issue with the alignment in a list using mat-card. Here is my current layout: https://i.stack.imgur.com/VKSw4.jpg Here is the desired layout: https://i.stack.imgur.com/8jsiX.jpg The problem arises when the size of content inside a ...
I have been working on a React.js application which is a straightforward Cart app. You can take a look at the code sandbox here: https://codesandbox.io/s/znvk4p70xl The issue I'm facing is with unit testing the state of the application using Jest and ...
Browser exposes HTML IDs as global variables. <span id="someid" class="clsname1 clsname2 clsname3"></span> If you have the above HTML snippet, you can access a global variable called someid. You can interact with it in your console like this: ...
If I have an array such as a=[1,3,4,{roll:3},7,8,{roll:2},9], how can I split it into two arrays with the following elements: b=[1,3,4,7,8,9] c=[{roll:3},{roll:2}]. What is the best way to separate the contents of the array? ...
I am currently working with 2 Bootstrap Select dropdowns. One dropdown contains a list of countries, while the other contains a list of states. The country list is static and loads when the page is loaded. On the other hand, the state list is populated dyn ...