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.
4 answers
solution1
0 2018-03-22 19:12:30
generally with positional situations like this you'd just say var left = $('.entry-content').width() * -1; , does that not work in this case?
solution2
0 2018-03-22 19:20:29
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>
solution3
0 ACCPTED 2018-03-22 19:46:27
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 .
solution4
0 2018-03-22 20:03:48
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) ie
<script>
$(document).ready(function(){
var amountToScroll = $('img').width() - $('.entry-content').width()
$('.entry-content').scrollLeft(amountToScroll);
});
</script>
Hope this helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.