的JavaScript - 向下滾動到元素

可以使用帶有＃標記一個URL和內容ID滾動到一個元素：的JavaScript - 向下滾動到元素

window.location.href = "#ID"

這將scrol使得元件的頂部是在瀏覽器的頂部。我將如何滾動到一個元素，使其垂直居中？

來源

2014-10-29 super

爲什麼接近它的人？ – super 2014-10-29 08:16:11

沒有，有沒有內置的方式，你必須寫自己：

function center_element_vertically(elt) { 
    var rect = elt.getBoundingClientRect(); 
    window.scrollTo(0, rect.top + window.pageYOffset - 
     (window.innerHeight - rect.height)/2); 
}

替代方案，而無需編寫自己的代碼：你可以滾動，這樣的因素是在底部通過傳遞false至scrollIntoView，或者僅在通過調用scrollIntoViewIfNeeded而不可見時才滾動，僅在Chrome AFAIK中可用。

來源

2014-10-29 08:16:21

而像我會如何寫這樣的功能？ – super 2014-10-29 08:16:49

通過做一些涉及元素大小和當前位置的計算（使用'getBoundingClientRect'）。你的問題字面上是「有什麼辦法嗎？」，還是實際上「我怎麼辦？」？ – 2014-10-29 08:19:02

「我應該怎麼做」是 – super 2014-10-29 08:20:22

可以向前導航發生之後：

addEventListener("hashchange", function(){ 
    setTimeout(function(){ 
      document[ 
      document.documentElement.scrollTop ? 
      "documentElement": 
      "body" 
      ].scrollTop-= (innerHeight/2.1); 
    }, 1); 
}, false);

這將導致聚焦元素出現半山腰的屏幕，垂直居中。 2.1導致它滾動不到一半的屏幕，因爲頂部已經有一些空間了。您可以調整「.1」以匹配您想要的效果（基線，中等等）。

強制性小提琴鏈接：http://jsfiddle.net/ckhafLzq/2/

來源

2014-10-29 08:18:58 dandavis

innerHeight是當前視口的像素高度，有什麼不明白的地方？ – dandavis 2014-10-29 08:28:00

dandavis在這種情況下，我錯誤地理解了你的答案，因爲'（innerHeight/2.1）'不會在視口中居中放置一個項目。數學非常簡單：scrollToElement - （（viewportHeight - elementHeight）/ 2）...或者我失去了一些東西？ – 2014-10-29 08:33:53

hm ...你的小提琴在FF中不起作用，而且OP向一個元素詢問'「，以便它垂直居中？」 – 2014-10-29 08:51:24

這是我已經實現了：

function centerScroll(element) { 
    if (!(element instanceof Element)) { 
     throw new TypeError("Element expected"); 
    } 

    var bodyRect = document.body.getBoundingClientRect(); 
    var elementRect = element.getBoundingClientRect(); 

    var left = elementRect.left - bodyRect.left; 
    var top = elementRect.top - bodyRect.top; 

    var windowWidth = window.innerWidth; 
    var windowHeight = window.innerHeight; 

    var elementWidth = element.offsetWidth; 
    var elementHeight = element.offsetHeight; 

    var x = left - Math.max(0, (windowWidth - elementWidth)/2); 
    var y = top - Math.max(0, (windowHeight - elementHeight)/2); 

    window.scrollTo(x, y); 

    return [x, y]; 
}

來源

2014-10-29 16:09:35 super

的JavaScript - 向下滾動到元素

回答

相關問題