如何防止元素滚动到视图中？答案

【问题标题】：how to keep element from scrolling into view?如何防止元素滚动到视图中？
【发布时间】：2009-10-23 02:37:42
【问题描述】：

我将 jstree 插件与网页上的灯丝组按钮一起使用。当用户向下滚动时，我希望灯丝组按钮滚动到视图之外（保持原位），但按钮保持在视图中。这只发生在 IE 上。这是没有滚动时的样子：

Before Scrolling http://i375.photobucket.com/albums/oo194/cyberkrul/temp/PositionWithScrollProblem1.png

现在当用户开始滚动时...

When user starts scrolling ... http://i375.photobucket.com/albums/oo194/cyberkrul/temp/PositionWithScrollProblem2.png?t=1256234917

谁能提出可能是什么问题？

这里是html：

   <div id="divItems" style="overflow: auto; height: 100%;">
      <div class="fg-toolbar ui-widget-header ui-corner-all ui-helper-clearfix">
         <div id="divTreeToolbar" class="fg-buttonset ui-helper-clearfix">
            <a id="btnRefreshTree" href="#" class="fg-button ui-state-default fg-button-icon-solo ui-corner-all" title="Refresh"><span
               class="ui-icon ui-icon-refresh"></span>Refresh</a>
            <a id="btnSortTreeFoldersAsc" href="#" class="fg-button ui-state-default fg-button-icon-solo ui-corner-all" title="Sort Folders Ascending">
               <span class="ui-icon ui-icon-circle-arrow-s"></span>Sort Asc</a>
            <a id="btnSortTreeFoldersDesc" href="#" class="fg-button ui-state-default fg-button-icon-solo ui-corner-all" title="Sort Folders Descending">
               <span class="ui-icon ui-icon-circle-arrow-n"></span>Sort Desc</a>
            <a id="btnSearchTree" href="#" class="fg-button ui-state-default fg-button-icon-left ui-corner-all" title="Search"><span
               class="ui-icon ui-icon-search ui-icon-refresh"></span>Search</a>
         </div>
      </div>
    </div>

【问题讨论】：

标签： css

【解决方案1】：

从滚动条的外观看来，您的意思是 IE6。

如果是这样，则 IE6 中存在一个错误，它会导致在带有 height:100% 的 html 页面上任何带有 position:absolute; 的内容改为充当 position:fixed。

这是一篇关于它的文章：http://www.cssplay.co.uk/layouts/fixed.html

【讨论】：

它肯定与容器高度有关，我在 divItems 容器上删除了 100% 的高度，并且按钮保留在菜单工具栏中。但是我失去了滚动:-(，我的意思是树会无限地垂直扩展
您可以使用固定的像素高度而不是 100% 吗？使用 jquery，您可以将高度设置为 $(window).height()，它会产生相同的效果。
谢谢亚历克斯，我知道这一点，但我不想保持动态高度。我通过将树控件封闭到单独的 div（treeContainer）中解决了这个问题（据我的测试显示）。这有帮助。非常感谢

【解决方案2】：

这听起来像是定位问题（duh :)）。代码看起来如何？按钮放置在页面中的什么位置？我认为为了它是正确的，按钮应该有位置：绝对或位置：相对，并且它们的父级，应该是带有文件夹的 div 或该文件夹中的其他 div（正在滚动的那个），也需要有 position:relative 以便按钮知道要跟随哪个 div。

看到按钮的背景跟随滚动，首先尝试将其设置为 position:relative。

我希望我有点急于表达自己的意思，但希望它能让您对要查找的内容有所了解。

【讨论】：

谢谢吉米，我会告诉你进展如何