Question

我有一个与white-space: nowrap并排排列的内联块列表。这些元素应该从屏幕拉伸，并使用overflow-x: scroll滚动。

需要注意的是，这些内联块的内容包含按比例缩小的元素。这很有效，除了列表项本身不缩小，因此滚动条太远了。如果我只是缩放列表本身但列表项包含一些不应该缩放的项目，那将是有意义的。

<div id="container">
<ul id="list">
    <li>
        <span>ABC</span>
        <div class="scale">
            <div class="big-block"></div>
        </div>
    </li>
    <li>
        <span>ABC</span>
        <div class="scale">
            <div class="big-block"></div>
        </div>
    </li>
            ...

Here is a reduced test case demonstrating the issue.

我尝试使用浮点数而不是white-space: nowrap来执行此操作，并且我使滚动条正确定位（我认为可能是因为元素已从文档流中删除）但是浮点数除非我在容器上放置一个高宽度，否则会换行。这可以在chrome上工作但是在firefox上引起一个令人讨厌的长滚动条，这不依赖于容器内容。

如何达到预期效果？

Answer 1

webkit转换没有调整dom元素的大小以使文档正常流动 - 你必须在父容器上使用一些javascript来绕过它..

var scaleFactor = 0.5;
var elements = document.getElementsByClassName('scale');
for(var i = 0, length = elements.length; i < length; i++) {
  // noprotect

  elements[i].style.width = (elements[i].offsetWidth * scaleFactor) + 'px';
  elements[i].style.height = (elements[i].offsetHeight * scaleFactor) + 'px';

}

http://jsbin.com/OnAZIzo/9/

Css缩放元素和强制容器元素折叠到适当的大小

1 个答案: