CSS styles not applied to overflowing part of element

Question

I need to apply some styles to an element when the user scrolls the window horizontally, using JavaScript. The element is wider than the window. When The styles are added later, they are applied only to the part that you can see before scrolling horizontally to see the rest that's overflowing out of the window.

https://codepen.io/sleepydada/pen/RLBqYW

HTML:

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

CSS:

* {
   box-sizing: border-box; 
}
ul {
  list-style: none;
  display: flex;
  border-right: 13px solid yellow;
  padding:0;
  li {
    background:red;
    flex: 0 0 250px;
    height: 250px;
    border: 1px solid black;
    box-shadow: 0 4px 2px -2px gray;
  }
  &.added {
    border: 10px solid blue;
   }
}

JS:

var ul = document.querySelector('ul')
window.addEventListener('scroll', function() {
  ul.classList.add('added')
})

if you can use border in li list it's working . try this one &.added li { border-top: 10px solid blue; border-bottom:10px solid blue; } .added li::first-child{ border-left: 10px solid blue; } .added li::last-child{ border-right: 10px solid blue; } — lalit bhakuni
– lalit bhakuni, Commented Oct 13, 2017 at 7:07

G-Cyrillus · Accepted Answer · 2017-10-12 20:42:23Z

to allow a container to expand over its size initially set , you can use the table-layout . https://www.w3.org/TR/CSS2/tables.html#auto-table-layout

... the table's width is given by the width of its columns ...

In this case you use flex and do not allow children to wrap. display:table + table-cell will have the same behavior but it will also expand as much as needed.

var ul = document.querySelector('ul')
window.addEventListener('scroll', function() {
  ul.classList.add('added')
})

* {
  box-sizing: border-box;
}

ul {
  list-style: none;
  display: table;
  border-right: 13px solid yellow;
  padding: 0;
  height: 250px;
  width: 100%;/* is this needed ? */
}
ul li {
  background: red;
  display: table-cell;
  min-width: 250px;
  border: 1px solid black;
  box-shadow: 0 4px 2px -2px gray;
}
ul.added {
  border: 10px solid blue;
}

<ul>
  <li></li> 
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

https://codepen.io/gc-nomade/pen/QqBzaZ/

Collectives™ on Stack Overflow

CSS styles not applied to overflowing part of element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related