具有动态高度的滚动条

Question

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

Answer 1

是的，这是可能的。

有很多解决方案。一种方法是设置里面有较高图片的 div 的最大宽度。（你可以设置它在 %）另一种方法是使用媒体查询您可以使用 javascript 更改 css 属性高度等

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

这是 javascript 代码

windows.onresize=resizeImage;

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

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

Answer 2

谢谢大家的帮助！这是我想出的答案及其工作原理！（134.7%是我需要"scrollbar"图片到link的图片的纵横比。#Scroll {height: auto; max-height: 0px; padding-bottom: 134.7% ; overflow-y: auto}

具有动态高度的滚动条

Scroll bar that has a dynamic height

css

scrollbar

scrollbars