Geek Answers Handbook

Div goes past its parent

I am trying to create my own scroller and I use translate3d to scroll. The only problem is that when scrolling to the end, the thumb (scroller) goes too far down. I use the accepted formula, but for some reason it goes through its parent shell. Here is the formula:

 scrollPosition * scrollBarThumb_height / content_height

What am I doing wrong, and how can I get my thumb to stay completely in its parent view?

Jsfiddle

 console.clear(); var innerWrapper = document.getElementById('innerWrapper'); var scrollBar = document.getElementById('scrollbar'); var scrollBarThumb = scrollBar.firstElementChild scrollBarThumb.style.height = (innerWrapper.offsetHeight * innerWrapper.offsetHeight / innerWrapper.scrollHeight) + 'px'; innerWrapper.addEventListener('mousewheel', handleScroll); innerWrapper.addEventListener('DOMMouseScroll', handleScroll); innerWrapper.style.transform = 'translate3d(0px, 0px, 0px)'; function handleScroll(e) { // Prevent parents from scrolling e.preventDefault(); var direction = (e.detail < 0 || e.wheelDelta > 0) ? 1 : -1; // 1 = scroll down, -1 = scroll var start = parseInt(innerWrapper.style.transform.split(',')[1], 10); var scrollPosition = start + direction * 100; // Cannot use `deltaY`, because not all browsers support it. var scrolledToBottom = innerWrapper.scrollHeight - innerWrapper.parentElement.offsetHeight; scrollPosition = clamp(scrollPosition, -scrolledToBottom, 0); innerWrapper.style.transform = 'translate3d(0px, ' + scrollPosition + 'px, 0px)'; scrollBarThumb.style.top = -(scrollPosition * scrollBarThumb.offsetHeight / innerWrapper.parentElement.offsetHeight) + 'px' } function clamp(val, min, max) { if (typeof min !== 'number') min = 0; if (typeof max !== 'number') max = 1; return Math.min(Math.max(val, min), max); } 
 #outerWrapper { height: 400px; overflow: hidden; display: flex; } #content { background-image: url("http://images.freeimages.com/images/premium/previews/3037/30376024-beautiful-flower-portrait.jpg"); width: 400px; } #scrollbar { height: 100%; width: 50px; background-color: orange; } #scrollbar_thumb { background-color: yellow; border: 2px solid blue; position: relative; } 
 <div id="outerWrapper"> <div id="innerWrapper"> <div id="content"> Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor </div> </div> <div id="scrollbar"> <div id="scrollbar_thumb"></div> </div> </div>
+5
source share
1 answer

The borders were not correctly calculated for the total height of the element, thereby creating a problem.

Just add box-sizing: border-box; , to solve the problem:

 #scrollbar_thumb { ... box-sizing: border-box; }

JSFiddle working fork: https://jsfiddle.net/azizn/9nfns6kk/

+3
source

More articles:


All Articles