css - 具有动态高度的滚动条

标签 css scrollbar scrollbars

我创建了一个页面,其中有 2 张相邻的图片,每张占 50% 的宽度。左边是 300x900,右边是 300x1800。我需要将高度限制在不超过 900,所以我在较高的图片(右侧)上放了一个卷轴。两张图片都随浏览器窗口动态缩放,但滚动高度保持在 900。如果浏览器窗口缩小,我需要它像图片一样动态缩小高度。我希望滚动条将高度比例与左侧的图片(最大高度为 900 的图片)相匹配。这可能吗?谢谢你的帮助!

最佳答案

是的,这是可能的。

有很多解决方案。 一种方法是设置内部具有较高图片的 div 的最大宽度。(您可以将其设置为 %) 另一种方法是使用媒体查询 您可以使用 javascript 更改高度等的 css 属性。

对于特定的答案,您必须显示一些代码。

这是javascript代码

windows.onresize=resizeImage;

function resizeImage{
    document.getElementById('Scroll').style.height=document.querySelector('.imageframe-1').offsetHeight+'px';
    }

此代码获取包含图像 1 的跨度的高度并将其提供给#Scroll div

关于css - 具有动态高度的滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38990926/

相关文章:

html - 适合手机大小的网站

javascript - 使用粘性 div 平滑滚动

css - Google 网络字体在 Windows 上的 Chrome 中呈现不稳定

html - 水平滚动条不适用于选择标签

macos - Chrome 滚动条现在始终可见

jquery - 如何为 img src 使用变量?

javascript - 有什么方法可以隐藏/禁用浏览器默认的垂直滚动条,但应该可以在全屏 View 中使用鼠标滚轮滚动

java - 我的场景中的 ScrollEvent

css - 溢出隐藏不起作用