jquery - Positioned Fix Div 到 Div 的右侧并将其保存在包装器中

Question

我有一个中间 div，由两个 div 作为按钮控制，这两个 div 分别位于该中间 div 的右侧和左侧。要将这两个 div 作为控制按钮，它们必须处于固定位置。问题是我想要这两个固定的 div 包裹在 wrapper div 中，它的宽度是 80% 并且有自动边距，这样当窗口缩放时这两个 div 将留在“中间 div”的两侧。

下面是将这两个 div 作为控制按钮的脚本:

 $(document).ready(function () {
       $("#right").click(function () { 
       var leftPos = $('.DivDataMain').scrollLeft();
       $(".DivDataMain").animate({scrollLeft: leftPos + 250}, 800);
  });   

       $("#left").click(function () { 
       var leftPos2 = $('.DivDataMain').scrollLeft();
       $(".DivDataMain").animate({scrollLeft: leftPos2 - 250}, 800);
  });   
       });   

这里是应该使这两个 div 必须位于中间 div 两侧的 css:

.DivDataMain {
     width:100%;
     overflow:hidden;
     display:block; 
     background:#000; 
     height:400px; 
     margin:auto;
     position: relative;
}

#left {
     width:60px;
     overflow:hidden;
     display:block;
     background:rgba(204, 204, 204, 0.5); 
     height:200px;
     float:left; 
     clear:none; 
     position:fixed; 
     z-index:2;}

#right {
    width:60px;
    overflow:hidden;
    display:block;
    background:rgba(204, 204, 204, 0.5); 
    height:200px;
    clear:right;
    right: 0;
    position:fixed;
    z-index:3;}

#midleBody {
   width:auto;
   overflow:hidden;
   display:block;
   background:#CFC;
   height:200px;
   float:left; 
   clear:none; 
   position:fixed; 
   z-index:1;
}

下面是演示:Left Div & Right Div overlap

提前致谢

Answer 1

我想这就是你想要的......

Updated Fiddle

一些事情:

1. 对于正确的 div 的定位，我想不出有任何其他方法可以在不使用 calc 的情况下使用固定定位来完成。这意味着这在 IE8 中不起作用(希望这不是什么大问题)。
2. 我修复了你的 jQuery。您想要滚动 midleBody 的内容而不是 DivDataMain。
3. mini reset(css 中的 * 位)本身不是必需的，但因为固定元素是相对于视口(viewport)定位的，而不是最近定位的祖先，如果你有，则定位正确 div 的计算将关闭DivDataMain div 的包含元素上的任何边距/填充。
4. 我还必须更改标记中的源代码顺序才能使其正常工作。
5. 就我个人而言，我会考虑一种不同的方法。这对我来说似乎非常脆弱，我不喜欢这种特殊情况下的 calc 选项，因为没有后备。也许我会用啤酒考虑一下，然后再给你一个关于其他事情的建议。

同时，这是对布局/代码/标记的工作更新。

HTML:

<div class="DivDataMain">
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="midleBody">
        <p>The content of the midle body content of the midle body The content of the midle bodycontent of the midle body The content of the midle bodycontent of the midle body The content of the midle body</p>
    </div>
</div>

CSS:

* {
    margin:0;
    padding:0;
}
.DivDataMain {
    width:80%;
    overflow:hidden;
    position: relative;
    background:#000;
    height:400px;
    margin:auto;
}
#left, #right {
    width:60px;
    overflow:hidden;
    background:rgba(204, 204, 204, 0.5);
    height:200px;
    position:fixed;
    z-index:10;
    line-height: 200px;
    text-align: center;
    cursor: pointer;
}
#right {
    left: calc(90% - 60px);
}
#midleBody {
    overflow:hidden;
    white-space: nowrap;
    background:#CFC;
    height:200px;
}

jQuery:

 $(document).ready(function () {
     $("#right").click(function () {
         var leftPos = $('#midleBody').scrollLeft();
         $("#midleBody").animate({
             scrollLeft: leftPos + 250
         }, 800);
     });

     $("#left").click(function () {
         var leftPos2 = $('#midleBody').scrollLeft();
         $("#midleBody").animate({
             scrollLeft: leftPos2 - 250
         }, 800);
     });
 });