Automatically Animate/Scroll A Div Horizontally On Page Load-CodePudding

I have a seemingly basic question that I can't find any resources in what I am trying to acheive. I'm new to JavaScript and fairly mediocre at CSS.

What I am trying to accomplish is this. A page which can be displayed on a TV screen showing a list of sports results, overflowing to the right. I want the page to automatically scroll that div across to the right (which has a dynamic length depending on the amount of content) so it can see all the scores across all divisions and automaticaly scroll content to the right. When it reaches the end, pause, and then refresh (using Ajax) snapping back to the beginning.

I'm sure if I can be pointed in the direction of the right functions to use I can hook the various parts together.

Here's an example of something I am trying to run on page load that I'd like to scroll smoothly to the end over the course of 10 seconds, I just can't work out how to identify/set the "end" of the div.

$('#ScrollMe').animate({
    scrollX: ??? //To div end;
    }, 10000);

I think if I can solve this part, I can solve the rest.

Any pointers? Javascript, CSS.... open to anything!

CodePudding user response：

You can use the .scrollWidth property to determine how far to scroll, subtracting the visible width will give a more accurate end point, eg:

(styles and animation time set to 2s, just to demonstrate what's happening)

$("#scrollMe").animate({
  scrollLeft: ($("#scrollMe")[0].scrollWidth - $("#scrollMe").width())   "px"
}, 2000);

#scrollMe { width: 100%; border:1px solid blue; overflow:auto; }
#inner { width: 6000px; border:5px solid red; height:20px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=scrollMe>
  <div id=inner>
  </div>
</div>

CodePudding user response：

You just need to apply overflow: scroll css propertie, to the div you want to "overflow" the page width. So it will add a bar below the div, such as the default scrolling bar of every browser.

parentDivWithContentToOverflow{
  Overflow: scroll;
}

CodePudding user response：

This is a great example of what you need.

https://css-tricks.com/snippets/jquery/smooth-scrolling/

But you need to specify the div to achieve this.

If your requirement is only to scroll to the end of the page(which is right), then you can use your example. But you need to specify the pixel location to scroll to right. For that, you might need something like the below.

function getWidth(){
    return Math.max(document.body.scrollWidth,
    document.documentElement.scrollWidth,
    document.body.offsetWidth,
    document.documentElement.offsetWidth,
    document.documentElement.clientWidth);
}

The above code snippet was stolen from this answer