Blur effect on the right side of scrolling container

user_8636557 0
Viewed 1287

I want to achieve blur effect on the items at the end of scrollable container. But it stays on one item even if scrolled further. It should stick to the right side only.

Initial pic

enter image description here

when scrolled to the right enter image description here

.main-container .scrollable-nav {
    width: 75%;
    overflow-x: scroll;
    position: absolute;
}

.list-item-container {
    list-style: none;
    display: flex;
    font-size: 20px;
}

li {
    padding-right: 30px;
}

.right-bg::after {
    content: '';
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 60px;
    height: 100%;
    right: 0;
    position: absolute;
    z-index: 9999999;
    margin-left: auto;
    top: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .7) 40%, #fff 70%);
}
<div class="main-container">
    <div class="scrollable-nav right-bg">
        <ul class="list-item-container ">
            <li class="m-item">menuItem1</li>
            <li class="m-item">menuItem2</li>
            <li class="m-item">menuItem3</li>
            <li class="m-item">menuItem4</li>
            <li class="m-item">menuItem5</li>
            <li class="m-item">menuItem6</li>
            <li class="m-item">menuItem7</li>
            <li class="m-item">menuItem8</li>
        </ul>
    </div>
</div>

Fiddle link: https://jsfiddle.net/uLd5bga1/2/

pseudo-class pseudo-element css-selectors css html
1 Answers

You should give the pseudo element directly to the main-container.

.main-container {
  position: relative;
  width: 75%;
}

.main-container .scrollable-nav {
  width: 100%;
  overflow-x: scroll;
}

.list-item-container {
  list-style: none;
  display: flex;
  font-size: 20px;
}

li {
  padding-right: 30px;
}

.main-container::after {
  content: '';
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 60px;
  height: calc(100% - 20px);
  right: 0;
  position: absolute;
  z-index: 9999999;
  margin-left: auto;
  top: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .7) 40%, #fff 70%);
}
<div class="main-container">
  <div class="scrollable-nav right-bg">
    <ul class="list-item-container ">
      <li class="m-item">menuItem1</li>
      <li class="m-item">menuItem2</li>
      <li class="m-item">menuItem3</li>
      <li class="m-item">menuItem4</li>
      <li class="m-item">menuItem5</li>
      <li class="m-item">menuItem6</li>
      <li class="m-item">menuItem7</li>
      <li class="m-item">menuItem8</li>
    </ul>
  </div>
</div>

user_106987410
Related