Question

并排考虑两个容器元素，它们都比视口的宽度长，视口可以水平滚动。它们都包含一个内部元素，我想保留在包含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;
}

我很抱歉我觉得很难描述我需要什么，因为英语不是我的母语但是我想用图像和动画描述它：

[ The effect I want to achieve in steps 2 [] 1

Answer 1

这就是你想要的。

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

＆＃13;

$(".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");

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

你有没有尝试过任何解决方案？

Answer 3

我用JavaScript制作了一个简单的版本。我不知道它是否适用于所有浏览器。我确信它适用于Safari和Firefox。它非常迟钝，但可以解决这个问题。

＆＃13;

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);

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

如何将元素修复到视口中心关于容器元素？

3 个答案: