WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
HTML
CSS
JS
<div class='page'> <div class='container'> <div class='left'> <div class='tabs'> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div> </div> <div class='right'> <select> <option>Больше</option> <option>10</option> <option>15</option> <option>16</option> </select> </div> </div> </div>
.page { max-width: 400px; display: flex; text-align: center; border: 1px solid; padding: 10px; min-height: 500px; } .container { display: flex; width: 100%; } .left { display: flex; overflow-x: auto; } .tabs { display: flex; } span { display: block; padding: 2px; border: 1px solid; width: 100px; height: 20px; margin-right: 10px; } .right { flex: 0 0 120px; /* фикс ширина */ background: #eee; }
function scrollToItem(el) { console.log(el); el.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" }); } document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('span').forEach(span => span.onclick = () => scrollToItem(span)); })
Preview
Open Advanced Editor
Publish Code
Full Screen
HTML
CSS
JS
<div class='page'> <div class='container'> <div class='left'> <div class='tabs'> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div> </div> <div class='right'> <select> <option>Больше</option> <option>10</option> <option>15</option> <option>16</option> </select> </div> </div> </div>
.page { max-width: 400px; display: flex; text-align: center; border: 1px solid; padding: 10px; min-height: 500px; } .container { display: flex; width: 100%; } .left { display: flex; overflow-x: auto; } .tabs { display: flex; } span { display: block; padding: 2px; border: 1px solid; width: 100px; height: 20px; margin-right: 10px; } .right { flex: 0 0 120px; /* фикс ширина */ background: #eee; }
function scrollToItem(el) { console.log(el); el.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" }); } document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('span').forEach(span => span.onclick = () => scrollToItem(span)); })
Preview
Validating your code, please wait...