CODEWITHSUNDEEP
javascriptjqueryhtmlcsshorizontal-scrolling
Siddharth Thevaril
Siddharth Thevaril

Reputation: 3788

Set horizontal scrollbar position to the rightmost

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, i.e.; the scrollbar must be to the rightmost and then animate the scrollbar to move to the left (i.e.; 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

Upvotes: 5

Views: 13560

Answers (1)

Kishore Sahasranaman
Kishore Sahasranaman

Reputation: 4230

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/

Upvotes: 7

Related Questions