Can you share the specific equation used to calculate the size of a customized scroll bar thumb

I'm currently working on developing a custom scroll bar using HTML. Something along the lines of:

<div class="demo">
    <div class="content">
       My content goes here
    </div>
    <div class="scrollbar">
       <div class="thumb"></div>
    </div>
</div>

My goal is to dynamically set the height of the thumb using jQuery.

However, I'm struggling to determine the formula for calculating the thumb size.
I've attempted something similar to:

$.scrollViewHeight = $('.demo').height();
$.contentHeight = $('.content').height();
$.thumbHeight = ($.scrollViewHeight / $.contentHeight) * $.scrollViewHeight;

$('.thumb').height($.thumbHeight);

but it's not producing the desired result.
Q1. What formula should I use to determine the height of the thumb?

I've also set a minimum thumb size of 50px using CSS.
Q2. How can we calculate the scrolling speed of the thumb in this scenario where there is a lot of content to scroll through?

.

jqueryhtmlcssscrollscrollbar

Answer №1

If you're looking to create a custom scrollbar, there are a few key steps to get you started:

var $container = $(".container"),
    $content = $(".content"),
    $scrollbar = $(".scrollbar"),
    $scrollbarHandle = $(".scrollbar-handle");

/* Adjusting scrollbar handle height */

var viewportRatio = $container.height() / $content.height();

if (viewportRatio < 1) {
    $scrollbar.show();

    $scrollbarHandle.height(
        Math.max(
            50,
            Math.floor($scrollbar.height() * viewportRatio)
        )
    );
} else {
    $scrollbar.hide();
}

Next, you'll want to consider:

  1. Syncing content and scrollbar handle positions: Ensure handle moves when content changes size or is scrolled via other methods. Update content scroll position when handle is dragged.
  2. Implementing pagination for when users click areas of the scrollbar outside the handle.

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

Dynamic water filling effect with SVG

I'm trying to create a wipe animation that looks like water filling up inside of a drop shape. Currently, it is a square with a wave animation on top of the drop logo. The wave animation works correctly, but I am struggling to contain it within the dr ...

javascriptcssanimationsvgfill

What is the best way to use a computed property as a style value for a component in Vue.js?

My component's template includes the following HTML element: .grid-item(:style="{ width: columnWidth, backgroundColor: 'blue' }") I want to dynamically set the width of this element using a computed property: computed: { columnWidth () ...

javascriptcssvue.js

Adjusting the z-index of the tinyMCE toolbar

I have been utilizing the tinyMCE editor plugin, which transforms textareas into iframes and displays a toolbar at the top of the content. It has been functioning flawlessly. However, there are times when there are videos placed above the content. In such ...

jquerycsstinymce

Error message: IndexError: list index out of range while attempting to trigger a click event using selenium

There are a total of 41 category checkboxes on the page, with only 12 initially visible while the rest are hidden. To reveal the hidden checkboxes, one must click on "show more." This simple code accomplishes that: [step 1] Loop through all checkboxes > ...

pythoncssseleniumweb-scrapingscrapy

What is the recommended image size for Next.js websites?

According to documentation: The width of the image, in pixels. Must be an integer without a unit. The height of the image, in pixels. Must be an integer without a unit. https://nextjs.org/docs/api-reference/next/image Different devices come in various ...

cssnext.jsimage-optimizationnextjs-image

Combining several btn-group and btn-group-vertical elements within each other

I am looking to create a button grid resembling a numpad for my project. I am utilizing angular and bootstrap 5 and thought of using btn-group and btn-group-vertical for this purpose. While this setup would work for a regular button grid, I need to have t ...

htmlcsstwitter-bootstrapbootstrap-5

Sliding right is done by activating the Switch Function, while sliding to the left can be achieved by deactivating it with the help

My objective is to create a functionality where flipping the switch button will cause it to slide automatically to the right, revealing a red background div. When switched off, it should return to its original position with a yellow background using Jquery ...

jquerycss

Alter attribute with an impact

I am looking for a solution to switch the image source using attr, while also incorporating a fade effect in the process. I have attempted to implement one of the suggestions from another post, but it is not producing the desired outcome. Current Appearan ...

javascriptjqueryhtmlcss

Problem encountered with JSON web service response compression triggered by JBOSS 4.2.3

Implemented Axis2 JSON web services in JBOSS Appserver and set up response compression in the connector (in the server.xml file). Successfully tested the service using a Java client and received the compressed (GZIP) response, monitored through a TCP/IP mo ...

javajqueryjsonjbosswebservice-client

Animate an svg icon to follow a designated path as the user scrolls

I am currently working on a project that involves animating a bee svg icon as the user scrolls through the website. The bee starts at the top and fills in a grey color line with pink as the user moves forward, and moves backward as the user scrolls back. Y ...

javascripthtmljquerycss

Can you explain the process of selecting a SubMenu Item that is a hover link in IE using C# and Selenium?

I have been scouring various topics on Stack Overflow and other platforms for days in search of a solution to my problem, but so far, I have had no luck. I am facing an issue with automating a website using C# Selenium where Webdriver is unable to click on ...

htmlseleniumxpathmenu

Steps for invoking a Node.js function from a distinct JavaScript function on the front end

I am currently working on a project that involves a node js backend (app.js) connected to an HTML, CSS, and Javascript frontend (script.js). Within my HTML file, I have a form that allows users to upload an image, triggering a function in script.js to han ...

javascriptjquerynode.jsajax

Having trouble locating the source of the issue causing the product page to appear too wide on Shopify

Can someone assist me in identifying the issue that is causing the product page on this website () to be too wide? Here is an image highlighting the issue. I made some CSS customizations to make the product gallery full width and added padding to the pro ...

cssshopify

Encountering a 404 Error with jQuery Ajax Call Version 3.5.1

The ajaxCall function is returning a 404 error during the onChange select event. My application uses Spring Boot + BootStrap + Thymleaf + jQuery 3.5.1. The URL parameter corresponds to an internal spring boot @RequesteMapping. ERROR: https://i.sstatic.n ...

jqueryajaxspringspring-bootfirefox

What is the best way to include interactive text on an image?

Just starting to learn html and could use some quick guidance. I have this image here: https://i.sstatic.net/kBJEk.png I would like to place clickable text on the image that links to different pages when clicked, similar to this example: https://i.sstatic ...

htmlcss

What is the best way to incorporate a range of details into a div using only jQuery, all while avoiding the use of data-

I'm struggling to find a concise way to explain this, so please bear with me. The information I'm sharing here is all just for example purposes and may sound strange. I have been working on creating a character select page where clicking on a cha ...

javascriptjqueryhtml

You can interact with our dropdown menu using the tab key, even when it is

We are looking to make our dropdown tabbable when expanded and non-tabbable when collapsed. We attempted using tabindex="-1" on the content inside the expandable div, but this resulted in it being non-tabbable even when expanded. Any suggestions on how t ...

javascripthtmlcssfrontend

As the browser window is resized, the gap between images widens while the images themselves decrease

Hey there, I'm encountering some trouble with the image links at the top of my page. As I resize the browser or change screen resolutions in media queries using percentages, the images are resizing accordingly. However, I'm noticing that as the i ...

htmlcssimagescalespace

Passing an empty JSON object through Ajax requests

To Whom it May Concern (I am simply attempting to meet the "please add more detail" requirement) Upon sending data to the server as shown below, the body appears empty. Server // Route for POST method app.post('/pass', function (req, res) { ...

javascriptjqueryjsonajax

Getting rid of the empty spaces between the lines of cards in Bootstrap 4

I want to eliminate the vertical space between the cards in my layout. Essentially, I want the cards to maximize the available space. I am open to using a plugin if necessary, but I have not been able to find any relevant information online (maybe I used t ...

javascripthtmlcssbootstrap-4