将水平滚动条位置设置在最右边

Question

I'm making a website where you read articles by scrolling towards right similar to the windows 10 desktop apps.

I want to make sure that when the article loads, the page should display the end of the article, ie; the scrollbar must be to the rightmost and then animate the scrollbar to move to the left (ie; towards the beginning of the article) so that first time users know about the reading layout.

I'm also using CSS columns to break down the articles into columns. I tried using scrollLeft() to set scrollbar position to the rightmost but I don't know how to calculate the width of the article spanning horizontally

How can I do this?

HTML :

<div class="entry-content">
...

...

...

</div>

contains the article

CSS :

.entry-content {
    column-count: 3;
    max-height: 500px;
    overflow-y: hidden;
}

Here is the link to the fiddle

Answer 1

You need get the full width of the element.

   var left = $('.entry-content').width();
   $('.entry-content').scrollLeft(left);

Demo : https://jsfiddle.net/kishoresahas/9ynasean/1/