全屏模式下可见滚动条

Posted 2023-02-23

【中文标题】全屏模式下可见滚动条

【英文标题】：scrollbar visible on fullscreen mode

【发布时间】：2021-12-26 17:58:33

【问题描述】：

我制作了一个图像查看器应用程序，它只是使用覆盆子将图像发送到电视，并通过 HDMI 将其显示在连接的屏幕上。显示软件是Chrome，但我有一个小问题：

有一个非常小的 4 像素区域，我必须裁剪图像的底部才能看不到滚动条。

示例：屏幕分辨率为 1024 x 768

在全屏模式下使用 1024 x 768 的图片会创建一个垂直滚动条 将 y 像素减少 4 (1024 x 764) 会使滚动条消失，但在 Chrome for Linux 全屏模式下的图像下方会显示一个白色边框。

我没有花哨的 css 或 html 代码：

let content = document.getElementById("content");
let ImageDiv = document.createElement("IMG");

ImageDiv.src = pic.file

content.appendChild(ImageDiv);

只有很少的 css：

body 
  margin: 0;

摆脱边框和滚动条的最佳方法是什么？

编辑：

https://jsfiddle.net/jLv74co6/1/

最小的例子。不确定它是否有帮助，因为问题可能与 chrome Linux 版本有关。

【问题讨论】：

请发minimal reproducible example 了解调试详情。到目前为止，我们只能猜测。

我试过这样做，但我不确定这会有所帮助。

【参考方案1】：

::-webkit-scrollbar 
    width: 0;
    height: 0;

body 
    scrollbar-width: none;

img 
    display: block;

前两个块去掉了大多数浏览器（所有现代浏览器）上的滚动条，显示块去掉了图像的底部白色边框

【讨论】：

正是我想要的，非常感谢！我是否理解正确，这甚至会隐藏出现的滚动条？

这绝对隐藏了滚动条，在 body 元素和 div 上，唯一的是它不会在 Mac 上的 safari 上隐藏它，无法隐藏它，因为它出现在滚动条上，这是一个 Mac 问题，遗憾的是，解决方法为零，但这对其他所有问题都有效

幸运的是我在 Linux 上 :) 谢谢你的解释！