any clues
# javascripti
Ink
02/03/2022, 3:53 PMany clues
m
Michael Schmidt
02/03/2022, 4:07 PMFirst start with an example of what you are trying to do... using https://jsfiddle.net/ or something similar
👍 1
i
Ink
02/03/2022, 4:14 PMInk
02/03/2022, 4:15 PMin this case the scroller is moving to the right side, i want the last column to have a shadow until the scroller reaches extreme right
m
Michael Schmidt
02/03/2022, 4:48 PMIn javascript you could have this listener
document.querySelector(".wrapper").addEventListener("scroll",function(e) {e.currentTarget.dataset.horizontalScrollEnd = (e.currentTarget.scrollLeft + e.currentTarget.clientWidth >= e.currentTarget.scrollWidth);e.currentTarget.dataset.horizontalScrollBegin = (e.currentTarget.scrollLeft == 0);})Michael Schmidt
02/03/2022, 4:48 PMAnd then detect the html attribute on wrapper in CSS
i
Ink
02/03/2022, 4:58 PMwhere in the js it shows that the vertical bar is on the right side
m
Michael Schmidt
02/03/2022, 5:02 PMit should add to your .wrapper element to values
data-horizontal-scroll-end and data-horizontal-scroll-begin
if it is data-horizontal-scroll-end you have reached the end of your element if it is data-horizontal-scroll-begin you are at the beginning.
then your css could dostuff
.wrapper[data-horizontal-scroll-end="true"] table
{
color: blue;
}
i
Ink
02/03/2022, 5:15 PMthanks, i will take care of css, one last question it happens only on scroll, can it also happen on load because when loaded, the vertical bar will be on the left side before it is moved to middle or right side
m
Michael Schmidt
02/03/2022, 5:17 PMyou can force fire the javascript or you could just set the attributes as default that on your wrapper and assume it starts scrolled to the left all the way...
<div class="wrapper" data-horizontal-scroll-end="false" data-horizontal-scroll-begin="true">
Michael Schmidt
02/03/2022, 5:23 PMOr you could do something like this
function wrapperScrollEvent(e) {
e.currentTarget.dataset.horizontalScrollEnd = (e.currentTarget.scrollLeft + e.currentTarget.clientWidth >= e.currentTarget.scrollWidth);
e.currentTarget.dataset.horizontalScrollBegin = (e.currentTarget.scrollLeft == 0);
}
document.querySelector(".wrapper").addEventListener("scroll", wrapperScrollEvent);
wrapperScrollEvent({currentTarget: document.querySelector(".wrapper") } );
i
Ink
02/03/2022, 6:17 PMThanks its awesome,
can you guide in css
for my this fiddle, trying to make my cSS perfect like the Image
https://www.codeply.com/p/oZ4NjpvwbO
https://prnt.sc/26o1jrc
m
Michael Schmidt
02/03/2022, 6:30 PMI am not going to try to style it exactly the way you want.. that is why they pay you... but here is basic w ay of doing this...
https://jsfiddle.net/6yxwbnrc/
i
Ink
02/03/2022, 6:45 PMi own the company, not getting payment 🙂
Ink
02/03/2022, 6:46 PMand i can use div overlay, no need for TD
4 Views