using jQuery scollLeft() method to scroll to the right by default, what is wrong with my code?

Question

Here is my code:

<head>
    <title>Labs</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var left = $('.entry-content').width();
$('.entry-content').scrollLeft(left);
</script>
</head>
<body>
    <div class="container"> 
        <div class="entry-content"><img src="map.png"></div>
    </div>
</body>

I want the scroll to display to the far right automatically when the user visits the page. Currently it scrolls to the left by default. Please tell me what's wrong with my code.

JJWesterkamp · Accepted Answer · 2018-03-22 20:23:08Z

1

Make sure you include that script after the DOM element, or wrap it in a DOMContentLoaded handler. For example:

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var left = $('.entry-content').width();
        $('.entry-content').scrollLeft(left);
    });
</script>

In your example it's impossible for the selectors $('.entry-content') to select the actual element, because it does not yet exist when the javascript code runs. The DOM is parsed top to bottom, and any scripts that are found along the way are executed immediately.

As Nelson also points out in his answer, it is also a good idea to keep in mind that the image might take a while to load. Only once it is loaded, the image will start to occupy the actual space it needs. So, if you measure the dimensions of .entry-content before the image loads, you get a number that is inaccurate if the image requires more horizontal space than the containing element naturally occupies.

To fix this you can listen for the "load" event on window instead, which will always fire after DOMContentLoaded, and not before all resources (among which your image) have been loaded:

<script>
    window.addEventListener('load', function() {
        var left = $('.entry-content').width();
        $('.entry-content').scrollLeft(left);
    });
</script>

This example is equivalent to Nelson's answer.

edited Mar 22, 2018 at 20:23

answered Mar 22, 2018 at 19:46

JJWesterkamp

7,9561 gold badge25 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

poopyh3ad Over a year ago

wow, it worked!! thank you. I figured the place I put my script was a problem, but the window code you added to it is what really did the trick

Will Meier · Accepted Answer · 2018-03-22 19:12:30Z

0

generally with positional situations like this you'd just say var left = $('.entry-content').width() * -1;, does that not work in this case?

answered Mar 22, 2018 at 19:12

Will Meier

5385 silver badges13 bronze badges

Comments

Nelson Benítez León · Accepted Answer · 2018-03-22 19:56:33Z

0

You should execute your code when the page has finished loading (and so the image width is known) and for that you need to insert your code in the handler for the window.load event, like this:

<head>
    <title>Labs</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<script>
$(window).on('load', function() {
    var left = $('.entry-content').width();
    $('.entry-content').scrollLeft(left);
});
</script>
<body>
    <div class="container"> 
        <div class="entry-content"><img src="map.png"></div>
    </div>
</body>

edited Mar 22, 2018 at 19:56

answered Mar 22, 2018 at 19:20

Nelson Benítez León

51.1k8 gold badges70 silver badges84 bronze badges

2 Comments

JJWesterkamp Over a year ago

As of version 3 $(...).load() does not serve the purpose of adding an event listener. See the note here. You could instead use $(...).on('load', () => ...).

Nelson Benítez León Over a year ago

@poopyh3ad I updated code in my answer with bug noted by Jeffrey, thank you.

Nish26 · Accepted Answer · 2018-03-22 20:03:48Z

Try following script:

<script>
$(document).ready(function(){
    var left = document.querySelector('div.entry-content').getBoundingClientRect().left;
    window.scrollBy(left,0);
});
</script>

I used the getBoundingClientRect() to get the position of div element with .entry-content class attribute. The left property gives x-offset value from the left of the browser window. Now, i use that value to scroll the window using window.scrollBy(x,y) method.

For your snippet to work , you need to make some changes in your html :

 <script>
    $(document).ready(function(){
      var left = $('.entry-content').width();
      $('.entry-content').scrollLeft(left);
    });
 </script>

   <div class="container"> 
        <div class="entry-content" style="width:30%;overflow:auto"><img src="map.png"></div>
    </div>

Notice that i have restricted the size to 30% for div and setting overflow to true will cause div to show scrollbars if image width is more then width of the div. Now left will contain the width of the div element with .entry-content class applied and since the content of div can be scrolled now with scrollbars available, you can call scrollLeft(value) method on the div to scroll contents of this div to the left. If you want to scroll to the extreme right of the image, you should pass amountToScroll = widthOfImage-widthOfDivContaing image to the scrollLeft(amountToScroll) i.e.

<script>
    $(document).ready(function(){
     var amountToScroll = $('img').width() - $('.entry-content').width()
    $('.entry-content').scrollLeft(amountToScroll);
    });
 </script>

Hope this helps.

For scroll to extreme right case , make sure to apply suggested change in html for div i.e. apply style="width:30%;overflow:auto" . Assumption is image will be greater in width compared to width of the container div.

Collectives™ on Stack Overflow

using jQuery scollLeft() method to scroll to the right by default, what is wrong with my code?

4 Answers 4

1 Comment

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related