overflow-clip-box

overflow-clip-box

非标准

这个功能是非标准的，不在标准轨道上。不要在面向Web的生产站点上使用它：它不适用于每个用户。实现之间也可能存在大的不兼容性，并且行为在未来可能会改变。

该overflow-clip-box CSS属性指定相对于该框时存在溢出时发生的裁切。

/* Keyword values */
overflow-clip-box: padding-box;
overflow-clip-box: content-box;

/* Global values */
overflow-clip-box: inherited;
overflow-clip-box: initial;
overflow-clip-box: unset;

注：在Gecko中，默认情况下，padding-box在任何地方都可以使用，但<input type="text">类似的使用该值content-box。在Firefox 29之前，这种行为是硬编码的; 从那时起它使用这个属性，可以在别处使用。请注意，该属性仅在UA样式表和chrome上下文中被默认激活。

语法

值

padding-box该关键字使裁剪与填充框相关。

content-box此关键字使裁剪与内容框相关。

形式语法

padding-box | content-box

实例

填充盒

HTML

<div class="things">
  <input value="ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ" class="scroll padding-box">
  <div class="scroll padding-box"><span>ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ</span></div>
</div>

CSS

.scroll { 
  overflow: auto;
  padding: 0 30px; 
  width: 6em; 
  border: 1px solid black;
  background: lime content-box;
}

.padding-box {
  overflow-clip-box: padding-box;
}

HTML

function scrollSomeElements() {
  var elms = document.querySelectorAll('.scroll');
  for (i=0; i < elms.length; ++i) {
    elms[i].scrollLeft=80;
  }
}
var elt = document.queryElementsByTagName('body')[0];

elt.addEventListener("load", scrollSomeElements, false);

结果

规范

此属性已提交给W3C CSSWG; 它还没有在标准轨道上，但如果被接受，应该出现在CSS Overflow Module Level 3。

浏览器兼容性