Horizontal Scrollbar on the Top and Bottom

I've spent the last few days searching for a viable solution to this particular dilemma.

Basically, I have a div that requires a secondary scroll bar at the top in order to facilitate horizontal scrolling without having to navigate all the way to the bottom.

The content within this div is extremely diverse. My goal is to accurately determine its true width so that I can synchronize it with the dummy scroll bar div linked to it.

This content is retrieved via an AJAX request. One approach I tried was to include a div/p element with an auto width, returned along with the data by the AJAX call. This would serve as a single reference point to acquire the width from and apply it to the second div. However, the issue arises when the div/p tag only covers the visible portion of the content div upon return (tested using borders). Ideally, it should span the entire content div.

Are there any effective solutions out there for implementing secondary scroll bars with variable-width content? Suggestions involving JQuery or Javascript are appreciated.

javascriptjqueryhtmlcssscroll

Answer №1

Check out my solution in this fiddle:

http://jsfiddle.net/371g6mfa/

This is based on the jquery-ui slider demo from: http://jqueryui.com/slider/#side-scroll with some additional code:

In the HTML: I added a new scroll bar after the first slider (placing it on top can cause issues)

<div class="scroll-bar-wrap ui-widget-content ui-corner-top" id="slider2">
    <div class="scroll-bar"></div>
</div>

The JS part includes:

//adjusting positions for slider2
     slider2 = $('#slider2');
     slider2.css({
         top: (scrollContent.outerHeight() + slider2.outerHeight() * 2 - 1) * (-1)
     });
     scrollPane.css({
         'padding-top': slider2.height()
     }).height(scrollContent.height() + slider2.height() + 1);

The -1 and +1 tweaks are to fix minor border bugs. Hopefully, this helps. You can experiment with giving both sliders the same value and left position.

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

How can I programmatically define the earliest and latest selectable dates in a date picker within Angular 4?

I am currently working on a task to prevent users from selecting past dates on a date picker. I want to set the minimum date available on the date picker to the current date. Below is the code snippet I am using to achieve this: Component.html <input ...

htmlangular

How can you match something once in NodeJS?

I am experiencing an issue with my HTTP NodeJS server - every time I visit the URL, it outputs the result twice. const https = require('http'); const fs = require('fs'); const url = require('url'); https.createServer((req, r ...

javascriptnode.js

Concealing tab bars on Ionic 2 secondary pages

In my Ionic Bootstrap configuration, I have the following setup: { mode: 'md', tabsHideOnSubPages: true } However, despite having this setting in place, the tabs still appear on some sub-pages. It seems to be happening randomly. Is there ...

javascripttypescriptionic-frameworkionic2

Unable to save the session identifier from the response headers while utilizing sessions in react/frappe framework

I am attempting to retrieve the session id (sid) from the response headers in a unique scenario. My client application is situated on a local environment, while my API is hosted on an ERP Next server. Upon sending a login request from the React app, I am ...

javascriptreactjserpnextfrappe

Unable to add MySQL results to the array

This is the code I am working on: var nbu = req.body.nbu; var inv=[]; db.query( "SELECT * FROM `invoice_ska` WHERE nm_client =?", nbu, (err, results) => { if (err) throw err; inv.push(results); } ); console.log(inv);//this just [] }); I ...

javascriptmysqlexpress

Is it possible to utilize the output of a function nested within a method in a different method?

I am currently facing a challenge with my constructor function. It is supposed to return several methods, but I'm having trouble using the value from this section of code: var info = JSON.parse(xhr.responseText); Specifically, I can't figure ou ...

javascriptjsonajaxconstructor

Showcasing JSON information on an HTML webpage depending on the URL parameters provided

I am attempting to achieve the following using HTML and Javascript exclusively. Once users submit my form, their data is added to a confirmation page in this format: On that page, I aim to display all locations from locations.json with a country matching ...

javascriptjqueryjsonforms

What is the best way to access the inner value of an HTML tag?

There exists a variable named T T = < input type="text" name="amount" value="3" class="txt-spin" /> Inquire: What is the method to extract the value "3" from this tag using javascript..? ...

javascripthtml

Tips for importing the mongoose-long plugin using the ES6 method

How can I rewrite the given import syntax into ES6 import format? import mongoose from 'mongoose'; import 'mongoose-long'(mongoose); import { Types: { Long } } from mongoose; ...

javascriptnode.jsmongoosees6-modulesmongoose-plugins

Having trouble getting @vercel/ncc to work, keeps throwing a "Module not found" error

Recently, I have been attempting to follow a tutorial on creating custom GitHub actions using JavaScript from here. The tutorial suggests using the @vercel/ncc package to compile code into a single file if you prefer not to check in your node_modules folde ...

javascriptnpm

XState: linking together multiple promises seamlessly without needing intermediate states

After reading the Invoking Multiple Services section, it seems that despite being able to invoke multiple promises, they appear to be triggered without waiting for the previous one to complete in my own tests. // ... invoke: [ { id: 'service1' ...

javascriptreactjstypescriptxstate

trouble with fetching data

Within my Backbone view, I have the following code snippet: var BookView = Backbone.View.extend({ initialize: function() { this.render(); }, render: function() { this.model.fetch({ success : function(model, resp, opt) { alert(this.$el. ...

javascriptjquerybackbone.jsunderscore.js

Is it possible for videos to automatically play on mobile devices?

For the longest time, I believed that autoplay was disabled on all mobile devices. However, my perspective changed when I visited youtube.com from my Android phone earlier today and the video played automatically. Is this something that can be done with ...

androidhtmlyoutubevideo-streamingjwplayer

How to pass a method from a child component to a parent component in Vue.js

Does anyone know how to pass a function from the child component to the parent component? I have a modal in the parent component with cancel and submit buttons. When either button is clicked, I want to close the child component. I tried setting "show" in t ...

javascriptpythondjangovue.jsmodal-dialog

What are the best scenarios for employing Server Side Includes?

The documentation for Apache regarding SSI mentions that it is a convenient method to incorporate small snippets of information, like the current time. However, if most of your webpage content is being dynamically generated when served, then it suggests ...

htmlssi

What is the best way to use jQuery to apply custom styling to a DIV element that is rendered via an Ajax

I have a page where several DIV elements are being dynamically loaded through an Ajax call. I want to style them using jQuery after they finish loading. What specific event should I use for this purpose? ...

jqueryajax

Creating a state in React and populating the rows of a Material-UI table with fixed data

I have implemented a table in the UI using the material-UI Table component. Initially, I added static data without using the state property of react. Now, I am looking for a way to assign static data to table rows by utilizing the state property. The code ...

javascriptreactjsreact-reduxmaterial-ui

Positioning an element in the center of another using JQuery

Greetings! I am currently working with some elements that look like this: <div id="one">content</div> <div id="two">content</div> These elements are followed by another set of elements (without any parent, placed directly after th ...

javascriptjquerycsspositionpositioning

Struggling with configuring AngularJS?

I've been working on a simple setup, but I can't figure out why AngularJS isn't displaying the content within the curly brackets. It's got me completely baffled. If you'd like to check it out, here's the link to the plunker: ...

javascripthtmlcssangularjs

What is the best method for eliminating the gap between div elements in CSS?

I am in the process of creating a simple website to brush up on my basic HTML and CSS skills. Utilizing Dreamweaver CS6, I aim to master every aspect of web design the correct way. While exploring how to position div elements, specifically using margins fo ...

csshtml