如何将水平滚动条定位在 DIV 的中心答案

【问题标题】：How to position horizontal scroll bar at center of DIV如何将水平滚动条定位在 DIV 的中心
【发布时间】：2015-10-23 04:53:00
【问题描述】：

我试图将水平滚动条放置在该 div 的中心。我厌倦了 window.scrollTo() 但这适用于页面滚动而不是 div 滚动。

$(document).ready(function(){
    var outerContentWidth = $('.abc').width();
    var scrollPosition = outerContentWidth/2;
    $('.abc').scrollLeft(scrollPosition);

});

演示：fiddle

【问题讨论】：

标签： jquery html css

【解决方案1】：

以下将为您提供您想要的效果，并通过您的 jQuery 中的简单更改滚动到 div 的中心：

$(document).ready(function(){
    var outerContent = $('.abc');
    var innerContent = $('.abc > div');

    outerContent.scrollLeft((innerContent.width() - outerContent.width()) / 2);        
});

此代码会将滚动条设置为内部内容的中心。但是让我们来看看为什么。我们知道 scrollLeft 的最小值是零，最大值为 inner.width() - outer.width()。所以，半途而废很容易达到最大值的一半。

关于主题here的更多信息。

Demo

【讨论】：

【解决方案2】：

这是一个老问题，但您现在可以使用 scrollIntoView 解决此问题，具体取决于必须支持的浏览器：

$(document).ready(function(){ document.getElementById('center').scrollIntoView({ inline: 'center' }); });

Updated fiddle

【讨论】：

谢谢你们，这对我的 Angular 项目有帮助。 ``` setTabToCenter() { const actvieTab: any = document.getElementsByClassName('mat-tab-label-active'); actvieTab[0].scrollIntoView({ inline: 'center', }); } ```

【解决方案3】：

$(document).ready(function(){
    var scrollPosition = ($('#viewContainer').width()/2 + $('.abc').width())/2;
    $('.abc').scrollLeft(scrollPosition);

});

【讨论】：

具有 abc 类的 div 的宽度是可变的，因此它以不同的宽度出现在中心。
@Jitu > 当您不说并且您的示例具有固定宽度时，我们应该如何猜测？可变宽度是什么意思？为什么这个看起来很正确的解决方案对你没有帮助？
@Laurent S 没关系！正如你所说，我不知道它是可变的，但我的代码应该已经看到了。

【解决方案4】：

如果您想滚动以使中间 div 可见，只需像这样设置scrollPosition：

var scrollPosition = $('.page').width()*2; // scroll by 2 pages, so third page is visible.

http://jsfiddle.net/cxkmkb0o/3/

否则，如果您希望该中间页面在视图中也居中，则应在我建议的基础上添加偏移量。

编辑：您还应该注意到小提琴中的页面与“视图”的宽度不同。您应该将页面的width 更改为min-width，以确保它们采用正确的宽度。另外，在定位元素时应该考虑边框；每个边边框都会增加元素的宽度。 Here's the updated fiddle

【讨论】：

【解决方案5】：

可能对一些 cmets 有用，以便更好地理解，我的方法：

function scrollMeTo($Parent, $Child) {

    let parentHalf = $Parent.width() / 2; // half of parent width
    let childHalf = $Child.width() / 2; //half of child width
    let childPos = $Child.position().left; // X pos of child (relative to screen)
    //We increase X with the center of the child (childHalf) - scrolling here we see the right half of the child;
    //We decrease X with the parentHalf to obtain perfect center;
    let scroll = childPos + childHalf - parentHalf; //how much we need to scroll to the element
    //We now add the needed scroll to the current scroll.
    let nextScroll = $Parent.scrollLeft() + scroll;
    $Parent.scrollLeft(nextScroll);
}

或者作为一个线性使用：

function scrollMeTo($Parent,$Child){
       $Parent.scrollLeft($Parent.scrollLeft() + $Child.position().left + $Child.width() / 2 - $Parent.width() / 2);
}

【讨论】：

【解决方案6】：

你可以通过 simplay 来实现这一点，

$(document).ready(()=>{
    $('#scroll').scrollIntoView({ inline: 'center' });
});

或

$(document).ready(()=> {
    let outerContent = $('.abc');
    let innerContent = $('.abc > div');
    outerContent.scrollLeft((innerContent.width() - outerContent.width()) / 2);        
});

【讨论】：