使用jQuery scollLeft（）方法默認情況下向右滾動，我的代碼有什么問題？
[英]using jQuery scollLeft() method to scroll to the right by default, what is wrong with 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>
我希望滾動條在用戶訪問頁面時自動顯示在最右邊。 當前，默認情況下它滾動到左側。 請告訴我我的代碼有什么問題。
4 個解決方案
解決方案1
0 2018-03-22 19:12:30
通常在這樣的位置情況下，您只會說var left = $('.entry-content').width() * -1; ，在這種情況下不行嗎？
解決方案2
0 2018-03-22 19:20:29
您應該在頁面加載完成后執行代碼（因此圖像寬度是已知的），為此，您需要將代碼插入window.load事件的處理程序中，如下所示：
<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>
解決方案3
0 已采納 2018-03-22 19:46:27
確保在DOM元素之后包含該腳本，或將其包裝在DOMContentLoaded處理程序中 。 例如：
<script>
document.addEventListener('DOMContentLoaded', function() {
var left = $('.entry-content').width();
$('.entry-content').scrollLeft(left);
});
</script>
在您的示例中，選擇器$('.entry-content')無法選擇實際元素，因為在運行JavaScript代碼時該元素尚不存在。 DOM是從上到下解析的，在此過程中找到的所有腳本都將立即執行。
正如尼爾森在回答中所指出的那樣，記住圖像可能需要一段時間才能加載，這也是一個好主意。 僅在加載圖像后，圖像才會開始占用其所需的實際空間。 因此，如果在加載圖像之前測量.entry-content的尺寸，則在圖像需要的水平空間比包含元素自然占據的水平空間更多的情況下，您會得到不准確的數字。
要解決此問題，您可以改為監聽window上的"load"事件 ，該事件將始終在 DOMContentLoaded之后而不是在所有資源（其中包括您的圖像）已加載之前觸發：
<script>
window.addEventListener('load', function() {
var left = $('.entry-content').width();
$('.entry-content').scrollLeft(left);
});
</script>
這個例子等同於尼爾森的答案 。
解決方案4
0 2018-03-22 20:03:48
嘗試以下腳本：
<script>
$(document).ready(function(){
var left = document.querySelector('div.entry-content').getBoundingClientRect().left;
window.scrollBy(left,0);
});
</script>
我使用getBoundingClientRect（）獲取具有.entry-content class屬性的div元素的位置。 left屬性從瀏覽器窗口的左側給出x-offset值。 現在，我使用該值使用window.scrollBy（x，y）方法滾動窗口。
為了使您的代碼段正常工作 ，您需要在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>
請注意，我已將div的尺寸限制為30％，並且將overflow設置為true會導致div在圖像寬度大於div寬度時顯示滾動條。 現在左側將包含應用了.entry-content類的div元素的寬度，並且由於現在可以使用可用的滾動條滾動div的內容，因此您可以在div上調用scrollLeft（value）方法將該div的內容滾動到剩下。 如果要滾動到圖像的最右端 ，則應將amountToScroll = widthOfImage-widthOfDivContaing圖像傳遞給scrollLeft（amountToScroll），即
<script>
$(document).ready(function(){
var amountToScroll = $('img').width() - $('.entry-content').width()
$('.entry-content').scrollLeft(amountToScroll);
});
</script>
希望這可以幫助。
我的 JavaScript 使用 innerHTML 方法的代碼有什么問題？
[英]What is wrong with my JavaScript Code using the innerHTML method?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.