html - Chrome 中滚动条的媒体查询布局问题-6ren

html - Chrome 中滚动条的媒体查询布局问题

转载作者：行者123 更新时间：2023-11-28 13:23:16

25

4

我在 Chrome 中遇到了一个关于媒体查询的奇怪问题，这个问题相当晦涩，但确实困扰着我，所以我希望能在这里找到解决方案，或者至少确认我不会发疯。 .

基本上，当媒体查询启动时，似乎会将页面从内容滚出屏幕的状态(因此您有 y 轴滚动条)变为内容现在适合的状态在屏幕上(所以 y 轴滚动条不应该出现)似乎有一小段时间，页面布局呈现为好像滚动条在那里，即使它不存在(所以一些东西试图填充整个屏幕将不会在此期间出现)

我已经建立了一个简单的页面来展示这个问题。它包含两个 float div，当媒体查询以小于 500 像素的宽度启动时，它们将设置为不再 float 并具有更大的宽度——此时标题栏也从蓝色变为红色(为清楚起见)。

http://appasylum.net/test/mediaQueryChromeScrollBarIssue/

  <!DOCTYPE html>
  <html>
  <head>

      <title>Media Query Chrome Scrollbar issue</title> 
      <style type="text/css">

      html,
      body 
      {
         margin:0;
         padding:0;
      }

      .header
      {
        background-color: blue;
        padding: 10px;
        color: white;
        font-family: Helvetica, Arial, sans-serif;
      }

      .content
      {                
        background-color: #f5f5f5;
        border: 1px solid #e3e3e3;              
        float: left;
        width: 40%; 
        margin: 20px; 
      }

      @media (max-width: 500px) {

        .header
        {
          background-color: red;
        }

          .content
          {
            float:none;
            width: 90%;
          }
      }
      </style>

  </head>

  <body>

  <div class="header">
    Header
  </div>

  <div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec purus ut quam vestibulum porta sed ultrices velit. Suspendisse dapibus justo id ligula iaculis cursus. Fusce non diam ut ante porta lacinia id vel nisl. Mauris laoreet orci vel nulla imperdiet ac rhoncus diam accumsan. Quisque sed mauris mi, sollicitudin commodo ligula. Etiam arcu arcu, vehicula ut porttitor id, viverra non augue. Mauris laoreet fringilla tempus. Praesent elit elit, molestie eget bibendum vitae, fringilla nec turpis. Suspendisse eget ipsum sed sem egestas ultricies. Cras eleifend imperdiet magna nec elementum. Etiam arcu arcu, vehicula ut porttitor id, viverra non augue. Mauris laoreet fringilla tempus. Praesent elit elit, molestie eget bibendum vitae, fringilla nec turpis. Suspendisse eget ipsum sed sem egestas ultricies. Cras eleifend imperdiet magna nec elementum.Etiam arcu arcu, vehicula ut porttitor id, viverra non augue. Mauris laoreet fringilla tempus. Praesent elit elit, molestie eget bibendum vitae, fringilla nec turpis. Suspendisse eget ipsum sed sem egestas ultricies. Cras eleifend imperdiet magna nec elementum.
  </div>

  <div class="content"> Aliquam in mauris quis arcu aliquam aliquam eu ut mauris. Quisque ut tortor eu massa scelerisque vehicula. Morbi velit diam, egestas at placerat vel, tincidunt a nulla. Vivamus arcu augue, vulputate at elementum sit amet, adipiscing quis odio. Etiam arcu arcu, vehicula ut porttitor id, viverra non augue. Mauris laoreet fringilla tempus. Praesent elit elit, molestie eget bibendum vitae, fringilla nec turpis. Suspendisse eget ipsum sed sem egestas ultricies. Cras eleifend imperdiet magna nec elementum
  </div>

  </body>
  </html>

要在大于 500 像素宽(蓝色标题)的窗口中复制打开上面的链接，并且在一个只能让内容滚出页面的高度 - 然后慢慢减小窗口的宽度，直到它变成红色(即宽度小于 500 像素)。假设您的窗口高度导致未 float 的 div 不再需要滚动条(反之亦然) - 在红色和蓝色标题之间的过渡点(即媒体查询变为事件状态)您应该注意到很短的时间红色标题未填满整个视口(viewport)宽度的时期。

最佳答案

我认为 Chrome 在这里进入了无限循环。在你稍微低于 500px 之后，他删除了垂直滚动条，但是在他删除滚动条之后，窗口宽度又回到了 500px 以上，他为该宽度应用了 CSS，这反过来又需要垂直滚动条，我们又回到了我们开始的地方...如此无限循环。基本上，Chrome 只是通过保留垂直滚动条使用的空间来保护自己免受无限循环。

据我所知，您可以完全删除滚动条，即 overflow:hidden on body(但我想这对 99% 的网站没有多大帮助)，或者使用 overflow-y 始终将其保留在 body 上:滚动。

编辑:也许您可以尝试删除 body 标签上的滚动条，但将所有内容封装在一个带有 overflow-y:scroll 的 div 中。尽管 div 和 body 一样宽，但它似乎以这种方式工作，在我的测试中没有出现故障。这需要将此 div 设置为屏幕的 100% 高度，这可能是可行的。

关于html - Chrome 中滚动条的媒体查询布局问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14444831/

25

4

0

文章推荐： javascript - Promise 同步函数

文章推荐： JavaScript 动态类型 int/float

文章推荐： jquery 如何获取 div 的 css 属性

问题
关闭。这个问题是off-topic .它目前不接受答案。想要改进这个问题？ Update the question所以它是on-topic用于堆栈溢出。关闭 12 年前。 Improve thi
问题
我有一个动态网格，其中的数据功能需要正常工作，这样我才能逐步复制网格中的数据。假设在第 5 行中，我输入 10，则从第 6 行开始的后续行应从 11 开始读取，依此类推。如果我转到空白的第一行并输入
问题
我有一个关于我的按钮消失的问题我已经把一个图像作为我的按钮用这个函数动画 function example_animate(px) { $('#cont
php - 将现有帐户链接到 Facebook - 问题/问题
我有一个具有 Facebook 连接和经典用户名/密码登录的网站。目前，如果用户单击 facebook_connect 按钮，系统即可运行。但是，我想将现有帐户链接到 facebook，因为用户可以选
iOS map View 问题/问题
我有一个正在为 iOS 开发的应用程序，该应用程序执行以下操作加载和设置注释并启动核心定位和缩放到位置。 map 上有很多注释，从数据加载不会花很长时间，但将它们实际渲染到 map 上需要一段时间。
ruby-on-rails - Heroku，问题/问题
我被推荐使用 Heroku for Ruby on Rails 托管，到目前为止，我认为我真的会喜欢它。只是想知道是否有人可以帮助我找出问题所在。我按照那里的说明在该网站上创建应用程序，创建并提交
Android WebView setCertificate 问题 SSL 问题
我看过很多关于 SSL 错误的帖子和信息，我自己也偶然发现了一个。我正在尝试使用 GlobalSign CA BE 证书通过 Android WebView 访问网页，但出现了不可信错误。对于大多
c++ - Glew 问题， Unresolved external 问题
我想开始使用 OpenGL 3+ 和 4，但我在使用 Glew 时遇到了问题。我试图将 glew32.lib 包含在附加依赖项中，并且我已将库和 .dll 移动到主文件夹中，因此不应该有任何路径问题。
问题？
我已经盯着这两个下载页面的源代码看了一段时间，但我似乎找不到问题。我有两个下载页面，一个 javascript 可以工作，一个没有。工作:http://justupload.it/v/lfd7不是
jquery - 初级 jQuery 问题(FF/IE 问题)
我一直在使用 jQuery，只是尝试在单击链接时替换文本字段以及隐藏/显示内容项。它似乎在 IE 中工作得很好，但我似乎无法让它在 FF 中工作。我的 jQuery: $(function() {
Android ndk 问题 socket 和 std 问题
我正在尝试为 NDK 编译套接字库，但出现以下两个错误: error: 'close' was not declared in this scope 和 error: 'min' is not a m
java - Selenium 问题 : Select. deselectAll() 导致 iframe 问题
我正在使用 Selenium 浏览器自动化框架测试网站。在测试过程中，我切换到特定的框架，我们将其称为“frame_1”。后来，我在 Select 类中使用了 deselectAll() 方法。不久之
连接到 Heroku PostgreSQL 的 Python 问题 - SSL 问题
我正在尝试通过 Python 创建到 Heroku PostgreSQL 数据库的连接。我将 Windows10 与 Python 3.6.8 和 PostgreSQL 9.6 一起使用。我从“ht
python - 在 Pandas 中创建新列的 np.where() 问题(可能是 NaN 问题？)
我有一个包含 2 列的数据框，我想根据两列之间的比较创建第三列。所以逻辑是:第 1 列 val = 3，第 2 列 val = 4，因此新列值什么都没有第 1 列 val = 3，第 2 列 va
css - 如何调试 iphone 5 中的 css 问题(ui 问题)？
我想知道如何调试 iphone 5 中的 css 问题。我尝试使用 firelite 插件。但是从纵向旋转到横向时，火石占据了整个屏幕。有没有其他方法可以调试 iphone 5 中的 css 问题
CSS 问题，input[id]+label，:hover, 和 :checked 问题
所以我有点难以理解为什么这不起作用。我正在尝试替换我正在处理的示例站点上的类别复选框。我试图让它做以下事情:未选中时以一种方式出现，悬停时以另一种方式出现(选中或未选中)选中时以第三种方式出现(而不是
javascript - 1 javascript/css 问题 2 perl cgi 问题
Javascript CSS 问题: 我正在使用一个文本框来写入一个 div。我使用以下 javascript 获取文本框来执行此操作: function process_input(){
algorithm - NP 中的语言(问题)和 P 中的语言(问题)之间的多项式时间减少
你好，我很难理解 P、NP 和多项式时间缩减的主题。我试过在网上搜索它并问过我的一些 friend ，但我没有得到任何好的答案。我想问一个关于这个话题的一般性问题: 设 A,B 为 P 中的语言(或
python-3.x - 该算法(解决 leetcode 问题 650)(问题 2)的时间复杂度是多少？
你好，我一直在研究 https://leetcode.com/problems/2-keys-keyboard/并想到了这个动态规划问题。您从空白页上的“A”开始，完成后得到一个数字 n，页面上应该
ios - Xcode Server Bot 问题 : warning. 生成服务错误。问题:路径 'some/path' 的存档格式不正确
我正在使用 Cocoapods 和 KIF 在 Xcode 服务器上运行持续集成。我已经成功地为一个项目设置了它来报告每次提交。我现在正在使用第二个项目并收到错误: Bot Issue: warnin

首页

博学

6Ren·AI

商城

html - Chrome 中滚动条的媒体查询布局问题