Stopping or pausing the scrolling items at their current position when the mouse hovers over them, and then resuming when the mouse leaves

Question

Stopping or pausing the scrolling items at their current position when the mouse hovers over them, and then resuming when the mouse leaves

In my React page, I am attempting to create an infinite scroll list of items that starts at the bottom and ends at the top of a div.

While I have been able to achieve circular scrolling, I am struggling with pausing the scroll when the mouse hovers over the items. They continue to scroll despite the hovering.

As someone new to JS, I need help in implementing a feature that will pause the items in their current positions when the mouse hovers over them, and resume scrolling once the mouse leaves.

Here is the JSON dummy data string:

data =  [{"item0":10},{"item1":11},{"item2":12},{"item3":13},{"item4":14},{"item5":15},{"item6":16},{"item7":17},{"item8":18},{"item9":19}];

React code:

(Code remains unchanged)

dashBoard.css

.alerts-header {
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
}
.alerts-container {
  position:relative;
  height:100%;
  overflow:hidden;
}

(Styles remain unchanged)

.dashboard_alertBarChart {
  width: 45%;
  background-color: #1eeeee1a;
  border-radius: 10px;
  margin-top: 1%;
  position: relative;
  overflow: hidden;
}

Screenshot:

https://i.sstatic.net/oFGqo.png

I have attempted some solutions but require assistance in halting the scrolling effect when the mouse hovers over the items.
Thank you for your help.

javascript css reactjs json css-animations

Answer 1

Answer №1

If you're looking for a way to access the scroll animation applied through CSS in your web project, consider using the Element.getAnimations() method to retrieve the corresponding Animation object. Once you have obtained this object, you can utilize the .pause() and .play() functions as required:

const { useEffect, useState, useRef } = React;

const ScrollChart = () => {
  const [data, setData] = useState([]);
  const alertListRef = useRef(null);
  const scrollSpeed = 1;
  const [isHovering, setIsHovering] = useState(false);
  const [shouldScroll, setShouldScroll] = useState(true);
  let scrollRef = null;
  
  useEffect(() => {
    const fetchData = () => {
      try {
        //dummy data used
        const jsonStr = '[{"item0":10},{"item1":11},{"item2":12},{"item3":13},{"item4":14},{"item5":15},{"item6":16},{"item7":17},{"item8":18},{"item9":19}]';

        setData(JSON.parse(jsonStr));
      } catch (error) {
        console.log("Error-- " + error);
      }
    };

    fetchData();
  }, []);

  const handleMouseEnter = () => {
    setIsHovering(true);
    alertListRef.current.getAnimations()[0].pause();
  };

  const handleMouseLeave = () => {
    setIsHovering(false);
    alertListRef.current.getAnimations()[0].play();
  };

  return (
    <div className="dashboard_alertBarChart" >
       <div className="alerts-header">Alerts</div>
       <div className="alerts-container" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
          <div className="alert-list" ref={alertListRef}>
             {data.map((alert, index) => {
               const severity = alert.severity || 'medium'; // Set default severity as 'medium' if not found
               return (
                 <div key={index} className="alert-item">
                   <div className={`legend-box ${severity}`}></div>
                   {Object.keys(alert)[0]}: {Object.values(alert)[0]}
                 </div>
               );
             })}
          </div>
       </div>
    </div>
   );
};

ReactDOM.createRoot(document.getElementById('app')).render(<ScrollChart/>);

.alerts-header {
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
}
.alerts-container {
  position:relative;
  height:100%;
  overflow:hidden;
}

.alert-list {
  overflow-y: auto;
  animation: scroll 20s linear infinite;
  scrollbar-width: thin;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  scrollbar-width: thin;
}

.alert-item {
  font-weight:bold;
  padding-bottom:10px;
  color:#09094a;
}

@keyframes scroll {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(-100%);
  }
}

.legend-box {
  width: 14px;
  height: 14px;
  display: inline-block;
  margin-right: 5px;
}

.high {
  background-color: red;
}

.medium {
  background-color: yellow;
}

.low {
  background-color: green;
}

.dashboard_alertBarChart {
  width: 45%;
  background-color: #1eeeee1a;
  border-radius: 10px;
  margin-top: 1%;
  position: relative;
  overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Answer 2

If you're looking for a way to access the scroll animation applied through CSS in your web project, consider using the Element.getAnimations() method to retrieve the corresponding Animation object. Once you have obtained this object, you can utilize the .pause() and .play() functions as required:

const { useEffect, useState, useRef } = React;

const ScrollChart = () => {
  const [data, setData] = useState([]);
  const alertListRef = useRef(null);
  const scrollSpeed = 1;
  const [isHovering, setIsHovering] = useState(false);
  const [shouldScroll, setShouldScroll] = useState(true);
  let scrollRef = null;
  
  useEffect(() => {
    const fetchData = () => {
      try {
        //dummy data used
        const jsonStr = '[{"item0":10},{"item1":11},{"item2":12},{"item3":13},{"item4":14},{"item5":15},{"item6":16},{"item7":17},{"item8":18},{"item9":19}]';

        setData(JSON.parse(jsonStr));
      } catch (error) {
        console.log("Error-- " + error);
      }
    };

    fetchData();
  }, []);

  const handleMouseEnter = () => {
    setIsHovering(true);
    alertListRef.current.getAnimations()[0].pause();
  };

  const handleMouseLeave = () => {
    setIsHovering(false);
    alertListRef.current.getAnimations()[0].play();
  };

  return (
    <div className="dashboard_alertBarChart" >
       <div className="alerts-header">Alerts</div>
       <div className="alerts-container" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
          <div className="alert-list" ref={alertListRef}>
             {data.map((alert, index) => {
               const severity = alert.severity || 'medium'; // Set default severity as 'medium' if not found
               return (
                 <div key={index} className="alert-item">
                   <div className={`legend-box ${severity}`}></div>
                   {Object.keys(alert)[0]}: {Object.values(alert)[0]}
                 </div>
               );
             })}
          </div>
       </div>
    </div>
   );
};

ReactDOM.createRoot(document.getElementById('app')).render(<ScrollChart/>);

.alerts-header {
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
}
.alerts-container {
  position:relative;
  height:100%;
  overflow:hidden;
}

.alert-list {
  overflow-y: auto;
  animation: scroll 20s linear infinite;
  scrollbar-width: thin;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  scrollbar-width: thin;
}

.alert-item {
  font-weight:bold;
  padding-bottom:10px;
  color:#09094a;
}

@keyframes scroll {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(-100%);
  }
}

.legend-box {
  width: 14px;
  height: 14px;
  display: inline-block;
  margin-right: 5px;
}

.high {
  background-color: red;
}

.medium {
  background-color: yellow;
}

.low {
  background-color: green;
}

.dashboard_alertBarChart {
  width: 45%;
  background-color: #1eeeee1a;
  border-radius: 10px;
  margin-top: 1%;
  position: relative;
  overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Stopping or pausing the scrolling items at their current position when the mouse hovers over them, and then resuming when the mouse leaves

Answer №1

Similar questions

How can I change the "Return" button on the iOS keyboard to a "Next" button using jQuery or JavaScript?

The process of sharing a complete full-stack (ReactJS, NodeJS, socketIO) project on GitHub using Git Bash command line

Tips for updating Ref objects in React

What is the correct method for iterating through this array of objects and eliminating those with either null or empty item.text values?

Tips for sharing a post with an image through the addThis plugin in jQuery

Utilizing a Nodemailer template with a JSX/React component: A step-by-step guide

I need to display the product name associated with the product_id found in the line_items array within the order table. I aim to achieve this functionality by utilizing Laravel with Vue.js

Discovering the method for accessing nested JSON data through ng-repeat in AngularJS

Navigating with Reach Router only updates the URL, not the component being rendered

The module 'fs' cannot be resolved by Webpack Express due to an expression dependency in the request

Creating custom annotations for specific fields in jsonschema2pojo

Creating a responsive design for a centered image with absolute positioning

What steps can I take to troubleshoot and fix the issue of a Duplicate identifier 'DateType' error during the React/Typescript building process

The redirection from HTTP or www to HTTPS is not functioning as expected

The CSS remains dormant until the cursor is hovered over

Rendering data from the server using backbone.js: A comprehensive guide

accommodating multiple background images in CSS

Video streaming platform without the need for javascript and plugins

What is the best way to eliminate the `<option>` tags nested within a `<select>` element using

Using Node.js and DIME to send binary data via POST requests