javascript jquery在水平滾動容器中找到元素的左側位置

我有一個溢出：跨越400％文檔窗口寬度的自動容器。因此，我的頁面上有一個水平滾動條。我在這個容器中也有多個div，它們有不同的左邊位置。當我點擊它們時，我需要獲得每個容器的左側位置。我使用$（this）.offset（）。left，但是它給了我容器div的左偏移量，它是0px，我使用了$（this）.position（），但是這給了我同樣的東西。 .. 有什麼建議麼？javascript jquery在水平滾動容器中找到元素的左側位置

標記看起來是這樣的：

<div id='scroll'> 
<div id='content'> 
    <div class='container' rel='1'></div> 
    <div class='container' rel='2'></div> 
    <div class='container' rel='3'></div> 
    <div class='container' rel='4'></div> 
</div> 
</div>

CSS

#scroll{ 
    position:absolute; 
    width:100%; 
    height:95%; 
    overflow:auto; 
    } 
#content{ 
    float:left; 
    height:100%; 
} 
.container{ 
    height:100%; 
    float:left; 
    }

jQuery的

var iMaxSize = $(".container").size(); 
$("#content").css({width: $(document).width()*iMaxSize +'px' }); 
$(".container").css({width: $("#content").width()/iMaxSize +'px' });

來源

2011-06-19 sadmicrowave

我們可以看到使用它的標記嗎？ – kinakuta

@kinakuta - 查看OP的標記 – sadmicrowave

這很難測試，因爲你的.container在你的CSS中，但不在你的HTML中。通過它點擊時的聲音，你點擊父母，因爲它是「在子元素之上」......是這種情況嗎？ – jay

由於某些原因，我仍然無法讓.offset（）以它應該的方式工作，或scrollLeft（）。我只是決定圍繞這條路走完一圈。

$('.container').click(function(){ 
    var num = parseInt($(this).attr('rel')); 
    var left = $('.container').width() * num-1; 
    var top = $('.container').css('top'); 
    //do something with these values 
});

來源

2011-06-27 12:21:55 sadmicrowave

沒有嘗試這樣的事情...

$('#id').width();

來源

2011-06-19 02:00:51 Anish

width（）如何給我一個元素的左偏移量？ – sadmicrowave

我以前沒有用過它，但我想它的工作方式與scrollTop類似 - 請看scrollLeft()有一件事你需要做的是在滾動發生之前找到元素的起始scrollLeft位置並緩存它 - 然後從滾動後獲得的新的scrollLeft位置減去該值。

編輯 Wait，offset（）不工作？它應該工作。

來源

2011-06-19 02:16:04 kinakuta

您可以像這樣使用容器元素中的滾動位置;

$('#container .element').offset().left - $('#container').offset().left + $('#container').scrollLeft();

見的jsfiddle here

來源

2015-06-25 12:05:00 Danielle

使用position()，而不是如果你有麻煩抵消偏移。使用滾動對象的width（）來解釋它。當然，您可以將選擇器類型更改爲使用ID或任何適合您的情況。

$('.class for container div') 
    .animate({ scrollLeft: 
     $('.class for you want to scroll to').position().left - 
     $('.class for you want to scroll to').width() } 
    ,'slow');

來源

2017-10-18 18:17:24 user2908825

javascript jquery在水平滾動容器中找到元素的左側位置

回答

相關問題