Question

我不确定应该使用哪种关键字来提出这个问题，我已经在Google上搜索了这个，但看起来我的关键字不好。

问题是，我有两个div相对元素与动态内容，这意味着这两个元素的高度不固定，它们是可滚动的。我们假设first div class name l-content代表Left-Content，而second div class name代r-content Right-Content代表l-content。

r-content的内容比r-content更多，但当屏幕尺寸不足以显示整个内容时，它们都会滚动。

现在我想要发生的是当l-content到达它的最后一个内容时，滚动它就会停止，这样只有Facebook才会继续滚动。

示例与ads类似，您可以看到Recommendation，r-content等在其右侧显示的位置当达到最后一个内容时，该元素看起来像修复它的位置。我不确定它是否正在修复，但我希望我的h1 { font-family: sans-serif; color: #FFF; letter-spacing: 2px; font-weight: 300; } .l-content, .r-content { display: table; float: left; margin-bottom: 8px; text-align: center; padding: 20px; } .l-content { width: 800px; height: 2000px; background: #E04C4E; margin-right: 8px; } .r-content { width: 430px; height: 1000px; background: #5996BC; }能够像那样但不知道如何修复。

目前这是我的全部，请注意我在这上面使用Bootstrap：

CSS

<!--LEFT CONTENT-->
<div class="col-lg-8 l-content">
  <h1>Left Content with Continue Scrolling.</h1>
</div>

<!--RIGHT CONTENT-->
<div class="col-lg-4 r-content">
  <h1>Right Content with Continue Scrolling but scrolling will stop when last content is reached.</h1>
</div>

HTML

<notebook> 
    <page string="subjects"> 
        <field name="subject_ids" nolabel="1"  options="'no_quick_create':True,'no_create_edit':True}" attrs="{'readonly':[('state','=','done')]}"/> 
    </page> 
</notebook>

我不确定他们是否使用Javascript来执行此操作。

无论如何，非常感谢你。任何帮助将不胜感激。

Answer 1

我相信你在这里需要javascript，而jQuery正是适合这个。

scroll（）和scrollTop（）是这里的神奇功能：

function checkAll(checktoggle){
    var checkboxes = new Array(); 
    checkboxes = document.getElementsByTagName('input');
    for (var i=0; i<checkboxes.length; i++)  {
        if (checkboxes[i].type == 'checkbox')   {
            if(checkboxes[i].hidden != true){ //Checks if the element is hidden
                  checkboxes[i].checked = checktoggle; 
            }
        }
    }
}

如果它是粘性元素上方的静态内容，则效果最佳。如果它实时更新它的高度，你将会做很多计算只是为了保持一个元素。

保持元素可滚动，直到达到最后的内容

1 个答案: