全屏模式下可见滚动条

Question

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

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

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

在全屏模式下使用 1024 x 768 图片创建垂直滚动条
将 y 像素减小 4 (1024 x 764) 会使滚动条消失，但在 Chrome 中显示 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 版本有关。

Answer 1

::-webkit-scrollbar {
    width: 0;
    height: 0;
}
body {
    scrollbar-width: none;
}
img {
    display: block;
}

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

全屏模式下可见滚动条

scrollbar visible on fullscreen mode

html

css

django

google-chrome