Conceal the scroll bar while still allowing for scrolling functionality

In this code snippet, I am trying to maintain the scroll position of two blocks by syncing them together. Specifically, I want to hide the scrollbar of the left block while scrolling the right one.

If anyone has any suggestions or solutions for achieving this, it would be greatly appreciated.

$(function() {
    $('#two').scroll(function() {
        var bodyScrollTop = $(this).scrollTop();
        $('#one').scrollTop(bodyScrollTop);
    });
});
td{
  width:50px;
}
.one, .two{
  height:120px;
  width:200px;
  overflow-y:auto;
}
.one{
  float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one" id="one">
  <table border="1">
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
  </table>
</div>

<div class="two" id="two">
  <table border="1">
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
  </table>
</div>

https://jsfiddle.net/cie56w4h/

javascriptjquerycss

Answer №1

Utilize the overflow attribute:

.one {
    float: left;
    overflow: hidden;
}

Here's a demonstration:

$(function(){
  $('#two').scroll(function(){
var bodyScrollTop = $(this).scrollTop();
$('#one').scrollTop(bodyScrollTop); 
});
});
td{
  width:50px;
}
.one, .two{
  height:120px;
  width:200px;
  overflow-y:auto;
}
.one{
  float:left;
  overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one" id="one">
  <table border="1">
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
  </table>
</div>

<div class="two" id="two">
  <table border="1">
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
  </table>
</div>

Answer №2

To ensure smooth scrolling when .one class is scrolled programmatically, just apply the overflow-y:hidden style.

.one{
  float:left;
    overflow-y:hidden;
}


$(function(){
$('#two').scroll(function(){
var bodyScrollTop = $(this).scrollTop();
$('#one').scrollTop(bodyScrollTop); 
});
});
td{
  width:50px;
}
.one, .two{
  height:120px;
  width:200px;
  overflow-y:auto;
}

.one{
  float:left;
overflow-y:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one" id="one">
<table border="1">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
</div>

<div class="two" id="two">
<table border="1">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
... (remaining content omitted for brevity)... </tr>
</table>
</div>

Answer №3

try using this custom CSS code to customize the scrollbar appearance: 

::-webkit-scrollbar {
          width: 0px;
          background: transparent; /* makes the scrollbar transparent */
      }

$(function(){
$('#two').scroll(function(){
var bodyScrollTop = $(this).scrollTop();
$('#one').scrollTop(bodyScrollTop); 
});
});
td{
  width:50px;
}
.one, .two{
  height:120px;
  width:200px;
  overflow-y:auto;
}
.one{
  float:left;
}
#one::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one" id="one">
<table border="1">
<tr>
<td>1</td>
... (trimmed for brevity)
</tr>
</table>
</div>

<div class="two" id="two">
<table border="1">
<tr>
<td>1</td>
... (trimmed for brevity)
</tr>
</table>
</div>

Answer №4

$(document).ready(function(){
    $('#panel-two').scroll(function(){
        var scrollTop = $(this).scrollTop();
        $('#panel-one').scrollTop(scrollTop);
        $('#panel-one').css("overflow-y", "hidden");
    });
});

$('#panel-one').hover(function(){
    $('#panel-one').css("overflow-y", "auto");
});
td {
      width: 50px;
    }
    
    .panel-one, .panel-two {
      height: 120px;
      width: 200px;
      overflow-y: auto;
    }
    
    .panel-one {
      float: left;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="panel-one" id="panel-one">
    <table border="1">
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <!-- additional rows here -->
    </table>
</div>

<div class="panel-two" id="panel-two">
    <table border="1">
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <!-- additional rows here -->
    </table>
</div>

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

What is the best way to make a text scroll smoothly from left to right on my website?

I am currently working on my upcoming website and I could use some guidance in this area. My goal is to create a seamless horizontal scrolling effect on the page at a readable speed, but I'm having difficulty achieving this. *, *::after, *::before ...

htmlcssfrontend

Error: The function clickHandler has been referenced before it was declared or it has already been declared

Since I started using JSLint, I have encountered the common issues of "used before defined" and "is already defined." While I found solutions for some problems, I am currently stuck. Here is a snippet of my code: var foo; foo = addEventListener("click" ...

javascriptjslint

Creating a private variable to perform a select_sum query

I have defined private variables in my CodeIgniter code like this: private $table = 'phone'; private $column_order = array(null, 'name', 'price'); private $type = array('type'); private $battery_consumption = array ...

javascriptajaxcodeigniterdatatable

Looking for solutions to troubleshoot my custom modal script - or seeking out any alternatives?

At the moment, our modal iframes are powered by blockUI and "yes/no"-dialogs are handled by jQuery UI dialog. The decision to use these components was based on a few factors: Both components seamlessly integrate with the jQuery UI theme, ensuring visual ...

jquerymodal-dialog

Turn off Babel's strict mode when transpiling JavaScript files

Currently, I am facing an issue while trying to transpile a set of JavaScript files using Babel. Since Babel operates in strict mode by default, it triggers a syntax error whenever there is a conflict like the use of the delete keyword. The solution I am s ...

javascriptnpmbabeljs

When I hover over my divs, my span is positioned behind them

Greetings, I apologize for any language barriers. I will do my best to articulate my issue clearly. I have experimented with various approaches and reviewed similar questions, but unfortunately, I am unable to resolve the problem... I have created a title ...

csshover

Switching from AngularJS to vanilla JavaScript or integrating AngularJS and Flask on a single server

It is common knowledge that angular has the ability to create a project and convert it into pure HTML, CSS, and js code. Similarly, I am looking to do the same for my AngularJS application. When I execute the app using npm start it works perfectly fine. My ...

javascriptangularjsflask

Once one audio loop smoothly fades out, seamlessly transition into another loop by clicking

What's Happening : Within my page, I have implemented multiple buttons (labeled as b1, b2, b3) that trigger a smooth fadeIn effect for their respective sound loops when clicked. If the back home button is clicked, the currently playing sound will fad ...

jqueryfunctionaudioclickfadeout

Changing the data request body in datatables ajax on button click

My goal is to initially fetch data when the page loads and then allow users to apply filters by clicking on them to fetch updated data. The query I am using is a POST request because it requires complex parameters that need to be formatted as JSON for bett ...

javascriptjqueryajaxdatatables

Is it feasible to implement the Bootstrap GRID System?

Hello there! I am currently exploring a potential scenario. When viewing on a desktop or laptop, the layout should look like this: <div class="col-md-3"> sidebar </div> <div class="col-md-9"> article </div> On a smaller screen, ...

htmlcsstwitter-bootstrap

Incorporating a HTML layout with a JS backdrop

I have successfully implemented a JavaScript background and now I want to apply this background across all my PHP files. The issue is that the HTML code either overlaps with the JS content or appears behind it. How can I resolve this? Below is the JS fil ...

javascriptphphtmlcss

What is the best way to continuously make an ajax request in Angular.js and terminate it depending on the response received?

I am looking for advice on how to optimize my controller in order to run a periodic ajax call every 15 seconds instead of just once. Additionally, I am wondering how I can stop the call when needed. myApp.controller('myCntrl', function($window,$ ...

javascriptajaxangularjs

Configure markers on Google Maps

I've been attempting to integrate my markers into Google Maps, but I'm stuck on how to use the following: map.fitBounds(latlngbounds); Any ideas on how I can implement this easily? Below is the code I have so far: <script type="text/javas ...

javascriptphpgoogle-mapsgoogle-maps-api-3google-maps-markers

Incorporating a complete calendar system with Google Calendar, including the addition of a 'where' or 'location' field

I have successfully integrated the full calendar with my Google calendar. To maintain privacy, I have disabled sharing all event details on my website. My goal is to only display when I am busy and when I am free without revealing event titles. Instead, ...

jqueryeventsfullcalendargoogle-calendar-api

Guide on invoking a Python function using vanilla JavaScript within a Django application

I'm currently developing a Django application and I'm attempting to invoke a Python function in views.py upon clicking a button. I'm aiming to achieve this using vanilla JavaScript, as my knowledge of JavaScript is limited and I prefer to ke ...

javascriptpythondjango

Elements that are fixed are not visible on the browser's screen

Currently, I am facing an issue with two divs that have a position: fixed; property. Everything functions properly until I zoom in on the page. Typically, when you zoom in on a page, two sliders appear to allow you to view content beyond your screen. Howev ...

htmlcss

Adding CSS styles to a pre-existing table structured like a tree

Can a CSS style be applied to a pre-existing HTML table structured as a tree? For instance, in Firefox, the Bookmarks Library table is set up as a tree. Is it feasible to add a CSS style to one specific column without affecting the others? While using tr ...

htmlcssfirefox

The website link cannot be seen on Internet Explorer 8, however it is visible on other browsers like Firefox and Chrome

Please verify the following link: The link "Return to login page" is displayed correctly on Firefox, Chrome, etc., but it appears higher on IE8. How can this be fixed? To resolve this issue, you can adjust the CSS for the 'lost_password' div as ...

csshtmlinternet-explorerinternet-explorer-8

My goal is to create a stylish form using bootstrap and CSS3

I am aiming to replicate the layout of this particular page: https://i.sstatic.net/HxOhC.png Struggling to utilize css3 for designing, how can I achieve a form similar to this? Facing difficulty in creating the outer red border and inserting spacing betw ...

htmlcss

"Effortlessly emptying the text field with material-ui in React

I need assistance with clearing the content of two text fields and a button using Material-UI in React-JS. I am new to React and unsure how to achieve this. Below is the code I currently have: import React from 'react'; import RaisedButton from ...

javascriptreactjsmaterial-ui