未処理のテーブルフェード

Question

このような作成方法は？

、テーブルが最後まで100％にスクロールされたとき（オーバーフロー-X）フェードが消えなければなりません。

Answer 1

var fader_hidden = false; 
 
var contentscroll = function(elem){ 
 
    if(elem.scrollLeft + elem.offsetWidth === elem.scrollWidth){ 
 
     if(!fader_hidden) { 
 
      document.getElementsByClassName("fader")[0].style.visibility = "hidden"; 
 
      fader_hidden = true;  
 
     } 
 
    }else{ 
 
     if(fader_hidden) { 
 
      document.getElementsByClassName("fader")[0].style.visibility = "visible"; 
 
      fader_hidden = false; 
 
     } 
 
    } 
 
};

.container { 
 
    position: relative; 
 
    max-width: 400px; 
 
} 
 

 
.scroll { 
 
    overflow-y: hidden; 
 
    overflow-x: scroll; 
 
} 
 

 
.content { 
 
    width: 1000px; 
 
} 
 

 
.fader { 
 
    display: block; 
 
    width: 50px; 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 17px; /* scrollbar height */ 
 
    top: 0; 
 
    background-image: linear-gradient(to left, white 0%, transparent 100%); 
 
}

<div class="container"> 
 
    <div class="fader">&nbsp;</div> 
 
    <div class="scroll" onscroll="contentscroll(this);"> 
 
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis odio sit amet quam faucibus lobortis placerat vel libero. Sed sollicitudin auctor dapibus. Ut interdum eu eros at dictum. Praesent non commodo tortor, vitae ultricies libero. Duis 
 
     maximus scelerisque convallis. Nunc at purus aliquet, ultricies nibh vel, lobortis sapien. Quisque a dignissim nisi. Donec et mauris aliquam, suscipit enim sed, feugiat dolor. Cras tincidunt augue bibendum ex volutpat, quis varius nisi sodales. 
 
     Morbi dignissim ipsum augue. Vivamus bibendum felis a eros rhoncus, a scelerisque arcu elementum. Pellentesque nec ipsum porttitor, convallis mauris auctor, pellentesque massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere 
 
     cubilia Curae; In ac metus scelerisque, volutpat neque et, sollicitudin dolor.</div> 
 
    </div> 
 
</div>