如何将元素固定到关于容器元素的视口中心？答案

【问题标题】：How to fix an element to viewport center regarding the container element?如何将元素固定到关于容器元素的视口中心？
【发布时间】：2016-04-27 21:10:58
【问题描述】：

考虑两个并排的容器元素，它们都比视口的宽度长，并且视口可以水平滚动。它们都包含一个元素，我想将其保留在包含 div 的可见部分的中心。这是标记：

<body>
    <div class="wrapper">
        <div class="container" id="container1">
            <div class="element" id="element1"></div>
        </div>
        <div class="container" id="container2">
            <div class="element" id="element2"></div>
        </div>
    </div>
</body>

这里是css：

body {
    overflow-x: auto;
}
.wrapper {
    width: 400%;
}
.container {
    width: 50%;
    border: 1px solid #ccc;
    height: 50px;
    float: left;
}

很抱歉，由于英语不是我的母语，所以很难描述我需要什么，但我想用图像和动画来描述它：

[2 []1

【问题讨论】：

欢迎来到 SO。你的英语很好，但你需要展示你的尝试（标记）。请查看帮助页面。
你试过任何代码吗？
很难理解你到底想要什么水平动画或滚动？
我认为使用鼠标事件和容器的位置，通过一些数学运算，我们可以通过限制边距或左值来为容器内的元素分配一个边距左/左，这不应该超过某个值。注意：这只是一个想法，但我认为它会起作用。
我已经添加了标记和糟糕的 css 代码（这只是为了给出基本的想法）我希望 div.element 保持在视口的中心，只要它的父级（div.container ) 完全可见。但是当 div.container 的可见部分小于视口的宽度时，我希望元素在这个可见部分居中。真的很难解释，再次抱歉:(

标签： jquery html css

【解决方案1】：

这就是你想要的。

礼物：看看更漂亮的meoww version。

$(".parallax").on("scroll", function() {
    var scrollValue = $(this).scrollLeft();
    var parallaxWidth = $(this).width();

    $(".box").each(function() {
        var container = $(this).parent();
        var containerWidth = $(container).width();
        var isLeftBox = $(container).is("#left");
        var ratioParallax = parallaxWidth/containerWidth;
        var ratioScroll = scrollValue/containerWidth;

        var move = 50*ratioParallax;

        if (isLeftBox) {
            move += ratioScroll*100;

            if (ratioScroll > 1/3)
                move -= (ratioScroll-1/3)*50;
        } else {
            move += (ratioScroll-1)*100;

            if (ratioScroll < 1)
                move -= (ratioScroll-1)*50;
        }

        $(this).css("left", move+"%");
    });
});

$(".parallax").trigger("scroll");

div.parallax {
    height:200px;
    width:400px;
    overflow-x:scroll;
    overflow-y:visible;
}
div.parent-container {
    height:100%;
    width:300%;
}
div.container {
    width:50%;
    height:100%;
    float:left;
    overflow:hidden;
}
body div.container#left {
    background-color:red;
}
body div.container#right {
    background-color:blue;
}
div.box {
    height:50px;
    width:50px;
    margin-top:-25px;
    margin-left:-25px;
    background-color:yellow;
    position:relative;
    top:50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parallax">
    <div class="parent-container">
        <div id="left" class="container">
            <div class="box"></div>
        </div>
        <div id="right" class="container">
            <div class="box"></div>
        </div>
    </div>
</div>

【讨论】：

【解决方案2】：

您所描述的概念称为视差，可能会涉及到一点点才能完全正确地完成。这是一个例子：http://stephband.info/jparallax/

您是否尝试过任何解决方案？

【讨论】：

我对视差很熟悉，不幸的是它并没有解决我的问题:(

【解决方案3】：

我用 JavaScript 做了一个简单的版本。如果它适用于每个浏览器，我不知道。我确信它可以在 Safari 和 Firefox 上运行。它非常滞后，但可以解决这个问题。

var pageWidth;
var marginLeft1;
var marginLeft2 = margin;
var box1 = document.getElementById('box11');
var box2 = document.getElementById('box22');
var boxWidth = 200;
var largeBoxWidth = 2459;
var margin = 50;

function scrollY(Yscroll) {
	pageWidth = window.innerWidth;
	
	if(Yscroll + pageWidth < largeBoxWidth) {
		marginLeft1 = (pageWidth - boxWidth) / 2 + Yscroll;
	} else if(largeBoxWidth - Yscroll > 2*margin + boxWidth) {
		marginLeft1 = (pageWidth -  (Yscroll + pageWidth - largeBoxWidth)) / 2 + Yscroll - 0.5 * boxWidth;
	}
	
	if(Yscroll + pageWidth - largeBoxWidth < 2*margin + boxWidth) {
		marginLeft2 = margin;
	} else if(Yscroll + pageWidth <= largeBoxWidth) {
		marginLeft2 = (Yscroll + pageWidth - largeBoxWidth) / 2 - 0.5 * boxWidth;
	} else if(2*largeBoxWidth - Yscroll > pageWidth) {
		marginLeft2 = (Yscroll - largeBoxWidth) + 0.5*pageWidth - 0.5 * boxWidth;
	} else if(2*largeBoxWidth - Yscroll > 2*margin + boxWidth) {
		marginLeft2 = (Yscroll - largeBoxWidth) + (2*largeBoxWidth - Yscroll) / 2 - 0.5 * boxWidth;
	}
	
	
	if(Yscroll + pageWidth - largeBoxWidth > 2*margin + boxWidth && Yscroll - largeBoxWidth < 0) {
		marginLeft2 = (Yscroll + pageWidth - largeBoxWidth) / 2 - 0.5*boxWidth;
	}
	
	box2.style.marginLeft = marginLeft2 + 'px';
	box1.style.marginLeft = marginLeft1 + 'px';
}

scrollY(document.body.scrollLeft);

body {
	margin:0;
	padding:0;
}

#wrap {
	height:200px;
	width:6148px;
}

#box1 {
	width:40%;
	height:100px;
	background-color:#FFDDDD;
	padding:50px 0;
	display:inline-block;
}

#box11 {
	width:200px;
	height:100px;
	background-color:#FF0000;
}


#box2 {
	width:40%;
	height:100px;
	background-color:#DDFFDD;
	padding:50px 0;
	display:inline-block;
	margin-left:-4px;
}

#box22 {
	width:200px;
	height:100px;
	background-color:#00FF00;
}

<body onscroll='scrollY(document.body.scrollLeft)'>
  <div id='wrap'>
    <div id='box1'>
      <div id='box11'></div>			
    </div>
		
    <div id='box2'>
      <div id='box22'></div>
    </div>
  </div>
</body>

【讨论】：