滾動元素到視圖中滾動容器

我有一個硬編碼高度的滾動容器：滾動元素到視圖中滾動容器

.scrollingContainer { 
    overflow: scroll; 
    height: 400px; 
}

此滾動容器中包含的項目列表，當我點擊的項目我要滾動的容器，點擊的項目位於滾動容器的頂部。

$('.scrollingContainer li a').click(function(event) { 
    var vpHeight = $('.scrollingContainer').height(); 
    var offset = $(this).offset(); 
    $('.scrollingContainer').animate({ 
    scrollTop: vpHeight - offset.top 
    }, 500); 
});

上面是我目前所遇到的，我遇到了我需要執行的數學計算的問題。另外我認爲var offset值是不正確的，因爲它似乎從頁面頂部獲得偏移量，我希望根據它在滾動容器中的位置獲取偏移值。

任何幫助表示讚賞！

來源

2013-11-20 CLiown

這裏有一個小提琴。它是否證明了這個問題？它似乎工作。 http://jsfiddle.net/isherwood/LqQGR – isherwood

是的，問題是我並不真正控制它滾動到什麼位置。另外，如果我點擊兩次，它會滾動兩次，而不是堅持以前滾動到的位置。 – CLiown

這個問題沒有解決？ – isherwood

這裏是一個活生生的例子：http://jsfiddle.net/LqQGR/12/

你想你的scrollTop的設置元素的位置（容器的頂部和鏈路之間的距離）加上當前scrollTop的（頂部之間的距離在包含內容和當前地方纔看得到

。另外：你需要你的scrollingContainer設置爲position: relative所以它的內部內容的offset parent

var $scrollingContainer = $('.scrollingContainer'); 

$scrollingContainer.on('click', 'a', function (event) { 
    var vpHeight = $scrollingContainer.height(); 
    var scrollTop = $scrollingContainer.scrollTop(); 
    var link = $(event.currentTarget); 
    var position = link.position(); 

    $('.scrollingContainer').animate({ 
     scrollTop: (position.top + scrollTop) 
    }, 500); 
});

來源

2013-11-20 16:56:11 Nate

哈哈哈，很容易就讓我們失望了，我沒有注意到，因爲你偶然的工作很好。您需要將您的scrollingContainer設置爲position：relative，以便它是偏移父級。我已經更新了我的答案，因爲現在它更簡單。 – Nate

順便說一下，我的答案比單獨添加點擊事件偵聽器到所有錨點標記的答案要好。這隻會增加一個偵聽器，這是更高性能的。你可以在這裏閱讀更多有關委託事件的信息：http://api.jquery.com/on/#direct-and-delegated-events – Nate

順便說一句，剛纔意識到你是一位同事回答者，而不是原始問題的提問者。希望能讓我的評論更有意義。抱歉! – Nate

的this answer的變化的伎倆：

http://jsfiddle.net/isherwood/LqQGR/14

var myContainer = $('.scrollingContainer') 

$(myContainer).on('click', 'a', function() { 
    var scrollTo = $(this); 
    myContainer.animate({ 
     scrollTop: scrollTo.offset().top - myContainer.offset().top + myContainer.scrollTop() 
    }); 
});

來源

2013-11-20 17:32:09 isherwood

滾動元素到視圖中滾動容器

回答

相關問題