完全删除水平滚动条

发布于 2024-12-09 04:29:07 字数 112 浏览 0 评论 0原文

有没有办法完全摆脱网页上的水平滚动条?

命令“overflow-x:hidden;”在 body/html 上隐藏了视觉样式,但如果您使用键盘上的箭头,功能实际上仍然存在,这有点糟糕......

Is there a way to get completely rid of the horizontal scrollbar on a webpage?

The command "overflow-x:hidden;" on body/html hides the visual style, but the functionality is actually still there if you use the arrows on your keypad, which kind of sucks...

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

扫码二维码加入Web技术交流群

发布评论

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

评论(3

因为看清所以看轻 2024-12-16 04:29:07

您问如何摆脱滚动条,是的,overflow:hidden就是正确的方法。

如果问题是如何避免滚动,那么最好的方法是设计不会溢出的网页,可能会结合使用动态流畅设计和媒体查询来保持所包含内容的宽度和高度。

但我实际上建议反对这样做。您无法事先知道访问者将拥有多大的窗口。您是否想过大屏幕和小屏幕的可用性差异?移动浏览器怎么样?

如果你真的决定永远不允许滚动,你可以使用以下 css 作为鬼鬼祟祟的技巧:

body {
    position: fixed;
    left: 0px;
    top: 0px;
}

但正如我所说,我不会推荐它......而且,它可能不适用于较旧的浏览器。我想到了IE6。也许IE7也...

You ask how to get rid of the scrollbar, and yes, overflow: hidden is the way to go.

If the question is about how to avoid scrolling, your best approach is to design web pages that don't overflow, possibly using a combination of dynamic fluent designs and media queries to keep width and height of your content contained.

But I would actually recommend against that. There is no way for you to know beforehand what size of window your visitors will have. Have you thought of the useability differences in large screens and small screens? How about mobile browsers?

If you are really fixed on never allowing scroll, you could use the following css as a sneaky-devil trick:

body {
    position: fixed;
    left: 0px;
    top: 0px;
}

But as I said, I wouldn't recommend it... Also, it probably won't work with older browsers. IE6 comes to mind. Maybe IE7 also...

假情假意假温柔 2024-12-16 04:29:07

您无法禁用用户滚动的能力,只能禁用视觉助手(例如滚动条)。如果您不想滚动,则必须将页面的宽度保持在浏览器窗口视口的宽度以下。您可以通过根据视口大小流动和调整元素大小来做到这一点。

You can't disable the users ability to scroll, you can only disable the visual helpers (eg. scrollbars). If you don't want any scrolling you have to keep the width of your pages below the width of the viewport of the browserwindow. You can do that by flowing and resizing the elements based on the viewport-size.

泪是无色的血 2024-12-16 04:29:07

遗憾的是,只有一种非 CSS 方法可以解决这个问题:您必须使用 onscroll 来防止 JavaScript 滚动。不要指望 preventDefault() 能够工作 - 你必须更有创意:

  1. 使用 scrollTo(0,0)
  2. 或者
    • 阻止所有箭头/翻页键输入
    • 阻止所有鼠标滚轮输入

查看另一个问题的答案:如何暂时禁用滚动?

Sadly there is only a non-CSS way to fix that: You have to prevent scrolling with JavaScript using onscroll. Don't expect preventDefault() to work though - you have to be more creative:

  1. Use scrollTo(0,0)
  2. Or
    • prevent all arrow/page-key input
    • prevent all mouse wheel input

Check out the answer on a different question: How to disable scrolling temporarily?.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文