Хочу сделать статический блок со скролом для переводов, суть в том что должно быть два поля, одно сверху, оно будет на исходном языке, а внизу будет перевод на нужный язык, так вот вопрос в том как сделать что бы для этих двух блоков появился скрол внизу и что бы он был один для двух блоков??
Что бы один для двух блоков был нужно в js привязать скрол второго блока к скролу первого, что бы когда скролим низ, скролился и верх, вот так:
var wrapper1 = document.getElementById('wrapper1');
var wrapper2 = document.getElementById('wrapper2');
wrapper2.onscroll = function() {
wrapper1.scrollLeft = wrapper2.scrollLeft;
};
Тут просто два обычных блока с текстом
<div id="wrapper1">
<div id="div1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci exercitationem fugit ipsa iure labore modi mollitia possimus suscipit tempore vel!
<div id="wrapper2">
<div id="div2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae commodi ex hic modi odio quam qui, quibusdam repellendus voluptate voluptates?
Стили для оформления наших текстовых блоков и выставление скрола только нижнему блоку:
#wrapper2 {
width: 300px;
border: none 0px RED;
overflow-x: scroll;
overflow-y: hidden;
border:1px solid black;
}
#wrapper1 {
width: 300px;
border: none 0px RED;
overflow-x: hidden;
overflow-y: hidden;
border:1px solid black;
}
#wrapper1 {
height: 120px;
}
#wrapper2 {
height: 100px;
}
#div1 {
width: 1000px;
height: 50px;
}
#div2 {
width: 1000px;
height: 100px;
background-color: #88FF88;
overflow: auto;
}