The feature to pin column could hide the rightmost column, which is specified with children property of ColumnsArea. The user is likely to see the column when the property changed, so scroll the area in such cases.
		
			
				
	
	
		
			31 lines
		
	
	
		
			771 B
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			31 lines
		
	
	
		
			771 B
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
| const easingOutQuint = (x, t, b, c, d) => c * ((t = t / d - 1) * t * t * t * t + 1) + b;
 | |
| 
 | |
| const scroll = (node, key, target) => {
 | |
|   const startTime = Date.now();
 | |
|   const offset    = node[key];
 | |
|   const gap       = target - offset;
 | |
|   const duration  = 1000;
 | |
|   let interrupt   = false;
 | |
| 
 | |
|   const step = () => {
 | |
|     const elapsed    = Date.now() - startTime;
 | |
|     const percentage = elapsed / duration;
 | |
| 
 | |
|     if (percentage > 1 || interrupt) {
 | |
|       return;
 | |
|     }
 | |
| 
 | |
|     node[key] = easingOutQuint(0, elapsed, offset, gap, duration);
 | |
|     requestAnimationFrame(step);
 | |
|   };
 | |
| 
 | |
|   step();
 | |
| 
 | |
|   return () => {
 | |
|     interrupt = true;
 | |
|   };
 | |
| };
 | |
| 
 | |
| export const scrollRight = (node) => scroll(node, 'scrollLeft', node.scrollWidth);
 | |
| export const scrollTop = (node) => scroll(node, 'scrollTop', 0);
 |