由于带有position:absolute的DIV位于页面之外而禁用水平滚动条

发布于 2024-11-09 13:48:42 字数 631 浏览 0 评论 0原文

我有一个位于页面“外部”的绝对定位元素，但我希望浏览器（我使用的是 Firefox 3）不要显示水平滚动条。看起来显示位于左侧的div（例如具有“left：-20px”）是可以的，并且不显示滚动条。然而，右侧的相同内容（“right：-20px”）始终显示滚动条。是否可以隐藏滚动条，但保持标准滚动成为可能？我的意思是我只想由于这个绝对定位的元素而禁用滚动，但由于其他元素而保持滚动（我知道我可以完全禁用滚动条，这不是我想要的）。

<!DOCTYPE html>
<html>
<body>
  <div id="el1" style="position: absolute; top: 0; background-color: yellow; left: -20px;">
    element
  </div>
  <div id="el2" style="position: absolute; top: 0; background-color: yellow; right: -20px;">
    element
  </div>
  <h1>Hello</h1>
  <p>world</p>
</body>
</html>

原文

I have an absolutely positioned element that is "outside" of the page, but I want browsers (I am using Firefox 3) not to display horizontal scrollbars. It seems that displaying a div that is positioned to the left (e.g. having "left: -20px") is okay, and no scrollbar is shown. However the same thing on the right ("right: -20px") always shows the scrollbar. Is it possible to hide the scrollbar, but to keep standard scrolling possible? I mean I only want to disable scrolling due to this absolute-positioned element, but to keep scrolling due to other elements (I know I can disable scrollbars completely, that's not what I want).

<!DOCTYPE html>
<html>
<body>
  <div id="el1" style="position: absolute; top: 0; background-color: yellow; left: -20px;">
    element
  </div>
  <div id="el2" style="position: absolute; top: 0; background-color: yellow; right: -20px;">
    element
  </div>
  <h1>Hello</h1>
  <p>world</p>
</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

柳絮泡泡 2024-11-16 13:48:42

是的，可以在 html 标签上输入 style="overflow-x:hidden"。这样就可以了...

回复收藏 0 原文

绝不服输 2024-11-16 13:48:42

事实上，这可以使用直接的 CSS 来完成，而对页面宽度等没有任何限制。可以通过以下方式完成：

创建一个具有隐藏溢出的 div，该 div 绝对位于页面的左上角。使其宽度和高度为 100%
创建另一个相同的 div，但没有隐藏溢出
为 div 添加一个类，该类环绕所创建的内容，使其相对位置并为其提供您希望主页内容达到的任何宽度在您创建的每个 div 中添加
该类的内容。

第一个 div 中的内容将与第二个 div 的内容保持正确对齐，但任何超出窗口边界的内容都将被截断。

下面是一个工作示例，无需使用任何 JavaScript，即可将图像保持在相对于其余内容的固定位置：

#widthfitter {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#contentWrapper {
  width: 100%;
  position: absolute;
  text-align: center;
  top: 0;
  left: 0;
}

.content {
  width: 600px;
  position: relative;
  text-align: left;
  margin: auto;
}

<div id="widthfitter">
  <div class="content">
    <img src="https://i.sstatic.net/U5V5x.png" style="position:absolute; top: 240px; left: 360px" />
  </div>
</div>
<div id="contentWrapper">
  <div class="content">
    Tested successfully on:
    <ul>
      <li>IE 8.0.6001.18702IS</li>
      <li>Google Chrome 17.0.963.46 beta</li>
      <li>Opera 10.10</li>
      <li>Konqueror 4.7.4</li>
      <li>Safari 5.1.5</li>
      <li>Firefox 10.0</li>
    </ul>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
      ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
      augue duis dolore te feugait nulla facilisi.
    </p>
  </div>
</div>

This can in fact be done using straight CSS without having any restrictions on page width etc. It can be done by:

Create a div with hidden overflow that is absolutely positioned at the top left corner of the page. Make it's width and height 100%
Create another div that is the same, but without hidden overflow
Add a class for divs that wrap around the content of the ones created, making its position relative and giving it whatever width you want the main page content to have
Add content of that class in each of the divs you've created.

The content in your first div will stay properly aligned with the content of your second div, but any of its contents that go beyond the perimeter of the window will be truncated.

Here's a working example that keeps the image in a fixed position relative to the rest of the content, without using any JavaScript:

#widthfitter {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#contentWrapper {
  width: 100%;
  position: absolute;
  text-align: center;
  top: 0;
  left: 0;
}

.content {
  width: 600px;
  position: relative;
  text-align: left;
  margin: auto;
}

<div id="widthfitter">
  <div class="content">
    <img src="https://i.sstatic.net/U5V5x.png" style="position:absolute; top: 240px; left: 360px" />
  </div>
</div>
<div id="contentWrapper">
  <div class="content">
    Tested successfully on:
    <ul>
      <li>IE 8.0.6001.18702IS</li>
      <li>Google Chrome 17.0.963.46 beta</li>
      <li>Opera 10.10</li>
      <li>Konqueror 4.7.4</li>
      <li>Safari 5.1.5</li>
      <li>Firefox 10.0</li>
    </ul>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
      ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
      augue duis dolore te feugait nulla facilisi.
    </p>
  </div>
</div>

回复收藏 0 原文

以酷 2024-11-16 13:48:42

您所要做的就是在 div 外部添加一个包装器。

这是CSS：我将我的类称为“main_body_container”

.main_body_container {
    min-width: 1005px; /* your desired width */
    max-width: 100%;
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
}

希望它有帮助:)

更新

为其创建了一支笔，请参阅这里

What you have to do is to add a wrapper outside of your divs.

Here is the CSS: I call my class 'main_body_container'

.main_body_container {
    min-width: 1005px; /* your desired width */
    max-width: 100%;
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
}

Hope it helps :)

Update

Created a Pen for it, see it here

回复收藏 0 原文

放我走吧 2024-11-16 13:48:42

不太确定这是否有帮助，但您可以尝试将上述 div 的样式更改为：

<div id="el1" style="position:fixed; left:-20px; top:0; background-color:yellow; z-index:-1">element</div>

<div id="el2" style="position:fixed; left:20px; top:0; background-color:yellow; z-index:-1">element</div>

通过将位置设置为固定，它将“锁定”指定的 div，而其余内容仍然可滚动。当然，这是假设在实例中其余内容通过 z-index 堆叠在定义的 div 之上。

希望这有帮助。

Not too sure if this would help but you can try changing the styling for the mentioned divs to this instead:

<div id="el1" style="position:fixed; left:-20px; top:0; background-color:yellow; z-index:-1">element</div>

<div id="el2" style="position:fixed; left:20px; top:0; background-color:yellow; z-index:-1">element</div>

By setting the position as fixed instead, it "locks" the specified divs in place while the rest of the content is still scrollable. Of course this is assuming that it is in the instance that the rest of the content is stacked by the z-index to be on top of the defined divs.

Hope this helps.

回复收藏 0 原文

心安伴我暖 2024-11-16 13:48:42

我通过将元素的 position 属性更改为 fixed 解决了这个问题：

position: fixed;

该元素不再导致水平滚动，但其他元素仍然导致水平滚动。

I was able to solve this problem by changing the element's position attribute to fixed:

position: fixed;

No more horizontal scrolling caused by this element but still horizontal scrolling caused by other elements.

回复收藏 0 原文

伴梦长久 2024-11-16 13:48:42

放置以下样式

html {overflow-x:hidden;}

我在 IE 8、FF 和 Chrome 上进行了测试。

Put the following style

html {overflow-x:hidden;}

I tested it on IE 8, FF and Chrome.

回复收藏 0 原文

就此别过 2024-11-16 13:48:42

将其添加到您的 CSS 中：

div {
overflow-x:hidden;
overflow-y:hidden;
}

IE 无法识别 Overflow-x 和 -y 样式。因此，如果您只关心 Firefox 3，那么这会很好用。否则，你可以使用一些 JavaScript：

document.documentElement.style.overflow = 'hidden';  // firefox, chrome
document.body.scroll = "no";    // ie only

Add this to your CSS:

div {
overflow-x:hidden;
overflow-y:hidden;
}

The overflow-x and -y styles are not recognized by IE. So if you're only concerned with Firefox 3, this will work fine. Otherwise, you can use some javascript:

document.documentElement.style.overflow = 'hidden';  // firefox, chrome
document.body.scroll = "no";    // ie only

回复收藏 0 原文

~没有更多了~

关于作者

冷了相思

暂无简介

0 文章

0 评论

21 人气

关注发私信

友情链接

文江博客

由于带有position:absolute的DIV位于页面之外而禁用水平滚动条

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（7）

关于作者

相关话题

热门标签

推荐作者

lorenzathorton8

Zero

萧瑟寒风

mylayout

tkewei

17818769742

友情链接

由于带有position:absolute的DIV位于页面之外而禁用水平滚动条

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（7）

关于作者

相关话题

热门标签

推荐作者

lorenzathorton8

Zero

萧瑟寒风

mylayout

tkewei

17818769742

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。