CSS - overflow-clip-box

Example

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

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

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

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);

Syntax  

/* 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;

Values

padding-box

This keyword makes the clipping be related to the padding box.

content-box

This keyword makes the clipping be related to the content box.

Formal syntax

padding-box <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> content-box

Description  

The overflow-clip-box CSS property specifies relative to which box the clipping happens when there is an overflow.

Browser Compatibility  

[1] This property is controlled by the layout.css.overflow-clip-box.enabled preference, which defaults to false. It only is activated inside UA stylesheets and the chrome context. See bug 966992.

See Also  

• Related CSS properties: text-overflow, white-space, overflow, overflow-x, overflow-y, clip, display

Specifications  

This property has been proposed to the W3C CSSWG; it is not yet on the standard track but, if accepted, should appear in CSS Overflow Module Level 3.

License