weixin_48301005 2024-09-24 20:37 采纳率: 42.9%
浏览 0

body高度设置100%或者100vh以后，window.scorll失效

body高度设置100%或者100vh以后，window.scorll失效，但是当body的height改成自动填充，window.scorrl有效，两者我都需要，求解

  • 写回答

2条回答 默认 最新

  • 一轮明月照丘壑 2024-09-24 20:38
    关注

    以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

    这个问题涉及到网页布局和JavaScript滚动行为的理解。当你设置<body>元素的高度为100%或100vh时，它依赖于其父元素的高度，这意味着如果父元素（通常是<html>或<body>自身）的高度没有明确地设置，那么<body>的高度可能会动态变化，这可能导致某些滚动行为不正常。而当你让<body>高度自动填充时，它会根据内容自动扩展，这通常不会导致滚动问题。

    关于你提到的window.scroll失效的问题，可能与<body>高度的设置有关，也可能是其他因素导致的。要解决这个问题，你可以尝试以下几个解决方案：

    解决方案：使用JavaScript动态设置body高度

    你可以使用JavaScript来动态地设置<body>的高度，确保它始终适应内容并允许滚动。例如：

    window.addEventListener('resize', function() {
  document.body.style.height = 'auto'; // 或一个具体的高度值如 document.height
});

    解决方案：使用CSS的视窗单位（vw/vh）结合min-/max-height属性

    你可以尝试使用视窗单位（vw和vh）来设置<body>的最小和最大高度。这样即使内容超出了视窗大小，也能保证滚动行为正常。例如：

    body {
  min-height: 100vh; /* 视窗高度 */
  max-height: 100%; /* 页面高度的百分比 */
}

    解决方案：检查其他可能影响滚动行为的因素

    确保没有其他CSS样式或JavaScript代码干扰滚动行为。有时候其他元素或脚本可能会影响页面的滚动行为。检查是否有其他脚本或样式影响了页面的布局和滚动。

    总结

    解决这个问题可能需要综合考虑CSS布局和JavaScript滚动行为。尝试上述解决方案之一，看看是否能解决你的问题。如果问题仍然存在，可能需要更详细地检查你的代码和布局设置。

    评论

报告相同问题？

问题事件

  • 创建了问题 9月24日

悬赏问题

  • ¥15 如何在vue.config.js中读取到public文件夹下window.APP_CONFIG.API_BASE_URL的值
  • ¥50 浦育平台scratch图形化编程
  • ¥20 求这个的原理图 只要原理图
  • ¥15 vue2项目中，如何配置环境，可以在打完包之后修改请求的服务器地址
  • ¥20 微信的店铺小程序如何修改背景图
  • ¥15 UE5.1局部变量对蓝图不可见
  • ¥15 一共有五道问题关于整数幂的运算还有房间号码 还有网络密码的解答？(语言-python)
  • ¥20 sentry如何捕获上传Android ndk 崩溃
  • ¥15 在做logistic回归模型限制性立方条图时候，不能出完整图的困难
  • ¥15 G0系列单片机HAL库中景园gc9307液晶驱动芯片无法使用硬件SPI+DMA驱动，如何解决？