Looking for consistent vertical and horizontal scrolling behavior in a React project

Question

Looking for consistent vertical and horizontal scrolling behavior in a React project

I am in need of assistance as I lack the necessary expertise in ReactJs to transform this design. Currently, it is written in Jquery but I would like guidance on how to recreate it in ReactJs. Specifically, I want the left div with the topic for each row to remain sticky when scrolling horizontally. It is important that I do not rely on the jquery library anymore; I aim to implement this purely in react using typescript or emotion 10 or a combination of both.

Any help or suggestions would be greatly appreciated!

Here is the JSFiddle link for reference

Snippet of HTML Code:

<div class="main">
  <div class="row">
  <div class="sticky">
    <div>First1</div>
    ...
   </div>
    <div class="content">
      <div>row content</div>
      ...
        <div class="content">
      <div>row content1</div>
      ...
        <div class="content">
      <div>row content1</div>
    
  </div>
</div>

Preview of CSS Code:

.main {
  background-color:blue;
  overflow: scroll;
  height: 200px;
  width: 400px;
}

.row {
  height: 50px;
  clear: both;
  width: 1000px;
  position: relative;
  padding-left: 150px;
  box-sizing: border-box;
}
.sticky, .content {
  float: left;
  width: 150px;
  border: 1px solid black;
}
.sticky {
  background-color: red;
  position: absolute; left: 0; top: 0;
}
.content{
  background-color: green;
}

To achieve horizontal scrollbar similar to the fiddle, here is an example of jQuery code:

$('.main').scroll(function(){
    $(this).find('.sticky').css('left', $(this).scrollLeft());
});

javascript jquery html css reactjs

Answer 1

Answer №1

js file :

import $ from 'jquery';  
class Test extends React.Component {

      componentDidMount(){
        $('.main').scroll(function(){
        $(this).find('.sticky').css('left', $(this).scrollLeft());
        });
      }

      render() {
        return (<div className="main">
      <div className="row">
      <div className="sticky">
        <div>First1</div>
        <div>First2</div>
        <div>First3</div>
        <div>First4</div>
        <div>First5</div>
        <div>First6</div>
        <div>First7</div>
        <div>First8</div>
        <div>First9</div>
        <div>First10</div>
        <div>First11</div>
        <div>First12</div>
        <div>First13</div>
        <div>First14</div>
       </div>
        <div className="content">
          <div>row content</div>
          <div>row content</div>
          <div>row content</div>
          <div>row content</div>
          <div>row content</div>
          <div>row content</div>
          <div>row content</div>
          <div>row content</div>
          <div>row content</div>
          <div>row content</div>
          <div>row content</div>
          <div>row content</div>
          <div>row content</div>
          <div>row content</div>
        </div>
            <div className="content">
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
        </div>
            <div className="content">
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
        </div>
      </div>
    </div>);
      }
    }

    React.render(<Test />, document.getElementById('app'));

css file :

.main {
  background-color:blue;
  overflow: scroll;
  height: 200px;
  width: 400px;
}

.row {
  height: 50px;
  clear: both;
  width: 1000px;
  position: relative;
  padding-left: 150px;
  box-sizing: border-box;
}
.sticky, .content {
  float: left;
  width: 150px;
  border: 1px solid black;
}
.sticky {
  background-color: red;
  position: absolute; left: 0; top: 0;
}
.content{
  background-color: green;
}

and html file :

<div id="app">

 </app>

I trust this will be beneficial for you :)

Answer 2

js file :

import $ from 'jquery';  
class Test extends React.Component {

      componentDidMount(){
        $('.main').scroll(function(){
        $(this).find('.sticky').css('left', $(this).scrollLeft());
        });
      }

      render() {
        return (<div className="main">
      <div className="row">
      <div className="sticky">
        <div>First1</div>
        <div>First2</div>
        <div>First3</div>
        <div>First4</div>
        <div>First5</div>
        <div>First6</div>
        <div>First7</div>
        <div>First8</div>
        <div>First9</div>
        <div>First10</div>
        <div>First11</div>
        <div>First12</div>
        <div>First13</div>
        <div>First14</div>
       </div>
        <div className="content">
          <div>row content</div>
          <div>row content</div>
          <div>row content</div>
          <div>row content</div>
          <div>row content</div>
          <div>row content</div>
          <div>row content</div>
          <div>row content</div>
          <div>row content</div>
          <div>row content</div>
          <div>row content</div>
          <div>row content</div>
          <div>row content</div>
          <div>row content</div>
        </div>
            <div className="content">
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
        </div>
            <div className="content">
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
          <div>row content1</div>
        </div>
      </div>
    </div>);
      }
    }

    React.render(<Test />, document.getElementById('app'));

css file :

.main {
  background-color:blue;
  overflow: scroll;
  height: 200px;
  width: 400px;
}

.row {
  height: 50px;
  clear: both;
  width: 1000px;
  position: relative;
  padding-left: 150px;
  box-sizing: border-box;
}
.sticky, .content {
  float: left;
  width: 150px;
  border: 1px solid black;
}
.sticky {
  background-color: red;
  position: absolute; left: 0; top: 0;
}
.content{
  background-color: green;
}

and html file :

<div id="app">

 </app>

I trust this will be beneficial for you :)

Looking for consistent vertical and horizontal scrolling behavior in a React project

Answer №1

Similar questions

Error: The function props.addToCart is not accessible

Craft a brief description for every individual component discovered

Is it possible to find a more efficient approach than calling setState just once within useEffect?

Having trouble with typecasting in Angular 9 after receiving an HTTP response?

Guide on exporting a function from a module as a class property

Retrieve the unique identifier of a single post from a JSON file within a NuxtJS project

Enhancing Mocha and Chai tests: Exploring ways to increase strictness

Rails CarrierWave and jQuery File Uploader

Updating by clicking with auto-prediction feature

jQuery's outerHeight() and height functions may experience flickering or fail to update properly when the window is resized to an odd number

"Troubleshooting: Issue with CSS code on Codepen when trying to create

PHP - Variables can only contain text characters

Is there a way to specifically retrieve the number of likes or followers from Facebook, Twitter, Instagram, and Snapchat in order to display them on my HTML website?

MUI: The color utility previously known as 'fade' has been updated to 'alpha' in order to more accurately reflect its purpose within material-table

Improved efficiency in CSS for left transition animations

Save the text found within an element to Appim wd.js

Oops! It appears that there is an error saying "Data.filter is not a function"

Unable to reach subdirectories on Nginx and React router while using a proxy server

Extract the HTML field value from an AJAX drop-down selection, rather than relying on user input

Problem with the menu button overflowing