Best approach to hide an absolutely positioned <div> when horizontally scrolling?
If I needed to implement this functionality, I would make a Vue component that would take in the table content (or any content) in a slot
and then listen to the scroll event of the .scrollable
div, adding or removing the faded ::after
content if the div was scrolled all the way to the right.
Here's an example:
Vue.component('fader', {
template: `
<div class="fader" :class="{ 'scrolled-right': isScrolledRight }">
<div class="scrollable" ref="scrollable">
<slot></slot>
</div>
</div>
`,
data() {
return {
isScrolledRight: false,
}
},
methods: {
onScroll(event) {
this.updateIsScrolledRight(event.target);
},
updateIsScrolledRight({ scrollLeft, offsetWidth, scrollWidth }) {
this.isScrolledRight = (scrollLeft + offsetWidth) === scrollWidth;
}
},
mounted() {
this.$refs.scrollable.addEventListener('scroll', this.onScroll);
this.updateIsScrolledRight(this.$refs.scrollable);
},
destroyed() {
this.$refs.scrollable.removeEventListeneer('scroll', this.onScroll);
}
})
.fader.scrolled-right::after {
opacity: 0;
}
Here's how the component works:
- A
ref
property is added to the.scrollable
div so that it can be easily referenced in the component's script. - An
onScroll
method is attached to the scroll event of thescrollable
ref when the component ismounted
and removed when the component isdestroyed
. - The
onScroll
method calls anupdateIsScrolledRight
method, passing it the scroll event'starget
(the.scrollable
div). - The
updateIsScrolledRight
method looks at thescrollLeft
,offsetWidth
, andscrollWidth
properties of the element passed as the parameter to determine if the element is scrolled all the way to the right and sets anisScrolledRight
property totrue
if so andfalse
if not. - The root div of the component has a bound
:class
attribute which will add thescrolled-right
class to the div if the value ofisScrolledRight
istrue
. - The
.scrolled-right
class sets the div's::after
content to haveopacity: 0;
. - The
updateIsScrolledRight
method is also called in themounted
hook so that, if the content in the<slot>
happens to not be wide enough to need a scrollbar, the fade will be removed in that case as well.
Here's a full working example:
Vue.component('fader', {
template: `
<div class="fader" :class="{ 'scrolled-right': isScrolledRight }">
<div class="scrollable" ref="scrollable">
<slot></slot>
</div>
</div>
`,
data() {
return {
isScrolledRight: false,
}
},
methods: {
onScroll(event) {
this.updateIsScrolledRight(event.target);
},
updateIsScrolledRight({ scrollLeft, offsetWidth, scrollWidth }) {
this.isScrolledRight = (scrollLeft + offsetWidth) === scrollWidth;
}
},
mounted() {
this.$refs.scrollable.addEventListener('scroll', this.onScroll);
this.updateIsScrolledRight(this.$refs.scrollable);
},
destroyed() {
this.$refs.scrollable.removeEventListeneer('scroll', this.onScroll);
}
})
new Vue({
el: "#app",
})
.fader {
position: relative;
width: 90%;
margin-left: 46px;
}
.fader::after {
content: "";
position: absolute;
z-index: 1;
top: 0;
right: -1px;
bottom: 15px;
pointer-events: none;
background: linear-gradient(to right, rgba(255, 255, 255, 0.1), white);
width: 10%;
opacity: 1;
transition: opacity .2s ease-out;
}
.fader .scrollable {
white-space: nowrap;
overflow-x: scroll;
position: relative;
}
.fader.scrolled-right::after {
opacity: 0;
}
.breakdown-title {
font-size: 14px;
font-weight: 700;
text-align: center;
margin: 8px auto;
}
table {
font-size: 12px;
margin: auto;
color: #000;
width: 100%;
table-layout: fixed;
}
table thead {
color: #fff;
background-color: #da291c;
}
table thead th {
width: 75px;
text-align: right;
}
table thead th:first-of-type {
width: 120px;
padding-left: 4px;
}
table thead th:last-of-type {
width: 80px;
padding-right: 4px;
}
table tbody tr:nth-of-type(odd) {
background-color: #fce9e8;
}
table tbody td {
width: 75px;
text-align: right;
}
table tbody td:first-of-type {
width: 120px;
text-align: left;
padding-left: 4px;
}
table tbody td:last-of-type {
width: 80px;
padding-right: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<fader>
<div class="breakdown-title">Total Revenue Bonus</div>
<table>
<thead>
<tr>
<th></th>
<th>Oct</th>
<th>Nov</th>
<th>Dec</th>
<th>Jan</th>
<th>Feb</th>
<th>Mar</th>
<th>Apr</th>
<th>May</th>
<th>Jun</th>
<th>Jul</th>
<th>Aug</th>
<th>Sep</th>
<th>Year End</th>
</tr>
</thead>
<tbody>
<tr>
<td>YTD Target</td>
<td>$1,325,705</td>
<td>$2,651,410</td>
<td>$3,977,115</td>
<td>$5,302,821</td>
<td>$6,628,526</td>
<td>$7,954,231</td>
<td>$9,279,936</td>
<td>$10,605,642</td>
<td>$11,931,347</td>
<td>$13,257,052</td>
<td>$14,582,757</td>
<td>$15,908,463</td>
<td>$15,908,463</td>
</tr>
<tr>
<td>YTD Actual</td>
<td>$19,956</td>
<td>$19,956</td>
<td>$19,956</td>
<td>$19,956</td>
<td>$19,956</td>
<td>$19,956</td>
<td>$19,956</td>
<td>$19,956</td>
<td>$19,956</td>
<td>$19,956</td>
<td>$19,956</td>
<td>$19,956</td>
<td>$19,956</td>
</tr>
<tr>
<td>% to Target</td>
<td>2%</td>
<td>1%</td>
<td>1%</td>
<td>0%</td>
<td>0%</td>
<td>0%</td>
<td>0%</td>
<td>0%</td>
<td>0%</td>
<td>0%</td>
<td>0%</td>
<td>0%</td>
<td>0%</td>
</tr>
</tbody>
</table>
</fader>
</div>