contenteditable with padding

by Anov Siradj

HTML

<div class="box" contenteditable>Type here</div>

CSS

body { padding: 50px; }

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 6px;
    background: gold;
}

::-webkit-scrollbar-thumb {
    background: black;
}


.box {
    border: 1px solid gold;
    height: 60px;
    outline: none;
    overflow: auto;

	/* Adding padding messes up the scroll position */
	padding: 30px;
}

JavaScript

// Question: Is it possible to have "contenteditable" with padding so th at when you type a lot and reach the bottom border.. it will keep the gap (padding) and the position of the scrollbar stays always at the bottom?

// Thanks @simurai