Is there a way to effortlessly scroll an element when the CSS overflow property is designated as auto?

Question

Is there a way to effortlessly scroll an element when the CSS overflow property is designated as auto?

I need help with creating a testimonial section where two divs automatically scroll inside a fixed-height container.

Currently, only one div is scrolling while the other remains static in my code.

I have implemented JavaScript for automatic scrolling within one div, but it doesn't seem to work for the second div.

javascript html css bootstrap-4 frontend

Answer 1

Answer №1

In this code snippet, there are multiple errors related to variable names and duplicates. Specifically, having two onLoad properties on the body tag is incorrect, and setting scrollTop as a variable is also erroneous since it is an attribute of the respective element.

let scrollRate = 100;

function initialize() {
  initScrollDiv();
  initScrollDiv2();
}

function initScrollDiv() {
  let divElement = document.getElementById("MyDivName");
  let reachedMaxScroll = false;
  
  divElement.scrollTop = 0;
  let previousScrollTop = 0;
  
  let scrollInterval = setInterval(function() {
    scrollDiv();
  }, scrollRate);
}

function scrollDiv() {
  // logic for scrolling
}

// More functions...

Document

Answer 2

In this code snippet, there are multiple errors related to variable names and duplicates. Specifically, having two onLoad properties on the body tag is incorrect, and setting scrollTop as a variable is also erroneous since it is an attribute of the respective element.

let scrollRate = 100;

function initialize() {
  initScrollDiv();
  initScrollDiv2();
}

function initScrollDiv() {
  let divElement = document.getElementById("MyDivName");
  let reachedMaxScroll = false;
  
  divElement.scrollTop = 0;
  let previousScrollTop = 0;
  
  let scrollInterval = setInterval(function() {
    scrollDiv();
  }, scrollRate);
}

function scrollDiv() {
  // logic for scrolling
}

// More functions...

Document

Answer 3

Answer №2

ScrollRate = 50;

function initScrollDiv() {
  DivElmnt = document.getElementById("MyDivName");
  DivElmntSecond = document.getElementById("MyDivName2");

  ReachedMaxScroll = false;
  ReachedMaxScrollSecond = false;

  DivElmnt.scrollTop = 0;
  DivElmntSecond.scrollTop = 0;

  PrevScrollTop = 0;
  PrevScrollTopSecond = 0;

  ScrollInterval = setInterval("scrollDiv()", ScrollRate);
}

function scrollDiv() {
  if (!ReachedMaxScroll) {
    DivElmnt.scrollTop = PrevScrollTop;
    PrevScrollTop++;

    ReachedMaxScroll =
      DivElmnt.scrollTop >= DivElmnt.scrollHeight - DivElmnt.offsetHeight;
  } else {
    ReachedMaxScroll = DivElmnt.scrollTop == 0 ? false : true;

    DivElmnt.scrollTop = PrevScrollTop;
    PrevScrollTop--;
  }

  if (!ReachedMaxScrollSecond) {
    DivElmntSecond.scrollTop = PrevScrollTopSecond;
    PrevScrollTopSecond++;

    ReachedMaxScrollSecond =
      DivElmntSecond.scrollTop >=
      DivElmntSecond.scrollHeight - DivElmntSecond.offsetHeight;
  } else {
    ReachedMaxScrollSecond = DivElmntSecond.scrollTop == 0 ? false : true;

    DivElmntSecond.scrollTop = PrevScrollTopSecond;
    PrevScrollTopSecond--;
  }
}

function pauseScrollDiv() {
  clearInterval(ScrollInterval);
}

function resumeScrollDiv() {
  PrevScrollTop = DivElmnt.scrollTop;
  PrevScrollTopSecond = DivElmntSecond.scrollTop;

  ScrollInterval = setInterval("scrollDiv()", ScrollRate);
}

body {
  /* background-color: #ffffff; */
}
.container {
  /* ... */
}

... (CSS content shortened for brevity)

<!DOCTYPE html>
<html lang="en">
  <head>
    ... (Head content, stylesheets and meta tags)
  </head>
  <body onLoad="initScrollDiv()">
    <div class="container mt-5">
      ... (Main content with test boxes, cards, images, text)
    </div>
    <script src="script.js"></script>
  </body>
</html>

This unique code snippet helped me achieve my desired functionality successfully.

Answer 4

ScrollRate = 50;

function initScrollDiv() {
  DivElmnt = document.getElementById("MyDivName");
  DivElmntSecond = document.getElementById("MyDivName2");

  ReachedMaxScroll = false;
  ReachedMaxScrollSecond = false;

  DivElmnt.scrollTop = 0;
  DivElmntSecond.scrollTop = 0;

  PrevScrollTop = 0;
  PrevScrollTopSecond = 0;

  ScrollInterval = setInterval("scrollDiv()", ScrollRate);
}

function scrollDiv() {
  if (!ReachedMaxScroll) {
    DivElmnt.scrollTop = PrevScrollTop;
    PrevScrollTop++;

    ReachedMaxScroll =
      DivElmnt.scrollTop >= DivElmnt.scrollHeight - DivElmnt.offsetHeight;
  } else {
    ReachedMaxScroll = DivElmnt.scrollTop == 0 ? false : true;

    DivElmnt.scrollTop = PrevScrollTop;
    PrevScrollTop--;
  }

  if (!ReachedMaxScrollSecond) {
    DivElmntSecond.scrollTop = PrevScrollTopSecond;
    PrevScrollTopSecond++;

    ReachedMaxScrollSecond =
      DivElmntSecond.scrollTop >=
      DivElmntSecond.scrollHeight - DivElmntSecond.offsetHeight;
  } else {
    ReachedMaxScrollSecond = DivElmntSecond.scrollTop == 0 ? false : true;

    DivElmntSecond.scrollTop = PrevScrollTopSecond;
    PrevScrollTopSecond--;
  }
}

function pauseScrollDiv() {
  clearInterval(ScrollInterval);
}

function resumeScrollDiv() {
  PrevScrollTop = DivElmnt.scrollTop;
  PrevScrollTopSecond = DivElmntSecond.scrollTop;

  ScrollInterval = setInterval("scrollDiv()", ScrollRate);
}

body {
  /* background-color: #ffffff; */
}
.container {
  /* ... */
}

... (CSS content shortened for brevity)

<!DOCTYPE html>
<html lang="en">
  <head>
    ... (Head content, stylesheets and meta tags)
  </head>
  <body onLoad="initScrollDiv()">
    <div class="container mt-5">
      ... (Main content with test boxes, cards, images, text)
    </div>
    <script src="script.js"></script>
  </body>
</html>

This unique code snippet helped me achieve my desired functionality successfully.

Is there a way to effortlessly scroll an element when the CSS overflow property is designated as auto?

Answer №1

Answer №2

Similar questions

Generate a JSON file using Node.js

My goal is to generate four HTML buttons that trigger specific functions: addition, subtraction, multiplication, and division

Unable to successfully create a dynamic anchor tag and open it in a new tab

Next.js manages 0Auth authentication using MoneyButton for authorization

Steps to reposition an element with absolute positioning to the upper left corner of the screen

Is it possible for me to utilize code blocks within the head content and link tags to make reference to specific themes

Unable to view images that have been uploaded through express.js

Ensuring the footer stays at the bottom of the page using Tailwindcss and ReactJS

Restangular is throwing an error because it cannot find the reference for _

Organizing and recycling React styled-components and native elements

I'm completely baffled as to why the client console is unable to locate my JS file

What is the significance of the "rc" within the version structure of an npm package?

What is the best way to alter the text of a button when the mouse hovers over it?

Enhance the functionality of Woocommerce email notifications by incorporating a customized VAT field

Checkbox does not appear in Internet Explorer

Generating a PDF file from an HTML and CSS page can be done without relying on APIs or libraries, by leveraging the

The Shopify Pixel Extension has encountered an issue - error code 1

The menu-item is unable to be centered in its location

What is the best way to reduce the width of the preformatted tag?

Is it achievable through CSS alone to eliminate the bullet point in a UL list when it consists of just a single item?