2016-01-22 9 views
12

私は、コンテンツが右側に動的に表示されるテキストエリア要素を持っています。テキストエリアを下にスクロールすると、テキストに対応してディスプレイもスクロールダウンします。私のテキストエリアには、MathJax要素も含まれています。私はhttps://stackedit.io/editorが私がやりたいこととまったく同じであることを発見しました。この機能を提供するJavaScriptライブラリがありますか?最初から始めてください。愚かな質問をして申し訳ありません。スクロール表示とスクロールテキストエリア

ここにはテキスト領域のスクリーンショットとその右側の表示があります。

enter image description here

+0

右手側のdivをレンダリングしていますか?あなたはそれを支配していますか? –

答えて

7

(ネイティブジャバスクリプト):ここではそれを取るのです

var columns = document.querySelectorAll('.column'); 
    for (var i = 0; i < columns.length; i++) { 
     columns[i].addEventListener('scroll', function() { 
      var factor = this.scrollTop/(this.scrollHeight - this.offsetHeight); 
      for (var j = 0; j < columns.length; j++) { 
       columns[j].scrollTop = factor * (columns[j].scrollHeight - columns[j].offsetHeight); 
      } 
     }); 
    } 

http://codepen.io/NourSammour/pen/ONLoxZ?editors=1011

か簡単にJQueryを使用できます。

$(document).ready(function() { 
    $('.column').each(function() { 
     var obj = $(this); 
     obj.scroll(function() { 
      $('.column').scrollTop(obj.scrollTop()); 
     }); 
    }); 
}); 

http://codepen.io/NourSammour/pen/wGwEmY?editors=1111

3

私が正しくあなたを理解していれば、あなたは二つの要素に均等にスクロール位置を配布したいです。あなたが使用できるのdiv 2(または複数)の間のスクロールを同期するに

var input = document.querySelector('.input'); 
 
var result = document.querySelector('.result'); 
 

 
input.addEventListener('scroll', function() { 
 
    var factor = input.scrollTop/(input.scrollHeight - input.offsetHeight); 
 
    var scrollPosition = factor * (result.scrollHeight - result.offsetHeight); 
 
    
 
    result.scrollTop = scrollPosition; 
 
});
.container { 
 
    display: flex; 
 
} 
 

 
.input, 
 
.result { 
 
    flex-basis: 50%; 
 
    height: 16rem; 
 
} 
 

 
.input { 
 
    background: lightgray; 
 
} 
 

 
.result { 
 
    background: papayawhip; 
 
    overflow-y: auto; 
 
}
<div class="container"> 
 
    <textarea class="input">Biscuit chupa chups sweet toffee croissant. Pastry muffin tiramisu gingerbread dessert. Cookie liquorice liquorice gingerbread tootsie roll fruitcake caramels pudding tootsie roll. Gingerbread dragée oat cake soufflé. Candy dragée candy bear claw pie cheesecake bonbon toffee. Caramels sweet roll marshmallow tiramisu powder. Marzipan bonbon tart jelly jujubes. Candy brownie marzipan chocolate biscuit dessert. Pudding lemon drops croissant ice cream bonbon danish croissant bonbon. Danish cake fruitcake chocolate bar gingerbread gummi bears sesame snaps halvah. Marzipan candy canes gingerbread chocolate cake. Jelly-o caramels tiramisu powder pudding pie biscuit halvah. Toffee wafer pastry danish powder candy chocolate bar brownie tiramisu. 
 
Lollipop chocolate cake pastry jujubes icing sesame snaps brownie cupcake cotton candy. Sesame snaps wafer sweet roll tiramisu cake topping chocolate cake fruitcake. Jelly beans sugar plum marshmallow cake chocolate bar liquorice chupa chups. Oat cake jelly fruitcake pudding gummies caramels icing. Chocolate tiramisu donut donut carrot cake jelly-o. Gingerbread marzipan chupa chups powder soufflé toffee. Chocolate bar jelly pie. Marshmallow jelly-o chocolate. Candy canes biscuit lollipop pudding pie biscuit caramels. Icing pudding muffin. Topping biscuit cotton candy sweet wafer sweet gummies cheesecake. Croissant soufflé pudding. Cookie jelly beans cotton candy powder sesame snaps tootsie roll pudding jelly-o bear claw. Pastry macaroon gummies chupa chups powder chocolate bonbon lemon drops. 
 
</textarea> 
 
    <div class="result">Biscuit chupa chups sweet toffee croissant. Pastry muffin tiramisu gingerbread dessert. Cookie liquorice liquorice gingerbread tootsie roll fruitcake caramels pudding tootsie roll. Gingerbread dragée oat cake soufflé. Candy dragée candy bear claw pie cheesecake bonbon toffee. Caramels sweet roll marshmallow tiramisu powder. Marzipan bonbon tart jelly jujubes. Candy brownie marzipan chocolate biscuit dessert. Pudding lemon drops croissant ice cream bonbon danish croissant bonbon. Danish cake fruitcake chocolate bar gingerbread gummi bears sesame snaps halvah. Marzipan candy canes gingerbread chocolate cake. Jelly-o caramels tiramisu powder pudding pie biscuit halvah. Toffee wafer pastry danish powder candy chocolate bar brownie tiramisu. 
 
Lollipop chocolate cake pastry jujubes icing sesame snaps brownie cupcake cotton candy. Sesame snaps wafer sweet roll tiramisu cake topping chocolate cake fruitcake. Jelly beans sugar plum marshmallow cake chocolate bar liquorice chupa chups. Oat cake jelly fruitcake pudding gummies caramels icing. Chocolate tiramisu donut donut carrot cake jelly-o. Gingerbread marzipan chupa chups powder soufflé toffee. Chocolate bar jelly pie. Marshmallow jelly-o chocolate. Candy canes biscuit lollipop pudding pie biscuit caramels. Icing pudding muffin. Topping biscuit cotton candy sweet wafer sweet gummies cheesecake. Croissant soufflé pudding. Cookie jelly beans cotton candy powder sesame snaps tootsie roll pudding jelly-o bear claw. Pastry macaroon gummies chupa chups powder chocolate bonbon lemon drops. 
 
Caramels tootsie roll marshmallow cookie. Chocolate fruitcake cake chocolate jelly beans candy canes chocolate bar carrot cake sesame snaps. Cotton candy tart topping bonbon fruitcake sweet tiramisu sweet. Halvah cake liquorice dessert jujubes dessert jelly-o bonbon powder. Lemon drops croissant soufflé icing tart pie dragée ice cream. Chocolate bar sesame snaps soufflé. Chocolate carrot cake marzipan tiramisu chupa chups. Jujubes chocolate apple pie jujubes oat cake topping. Lemon drops candy powder sweet dessert wafer chupa chups macaroon. Pudding gummi bears sugar plum donut. Cookie liquorice wafer dessert. Topping jujubes gingerbread. 
 
Cake donut tootsie roll wafer brownie. Soufflé cotton candy topping. Cake halvah ice cream macaroon jujubes sesame snaps. Apple pie biscuit chocolate chocolate cake tart marzipan apple pie. Chocolate bar cake bear claw cookie cake fruitcake carrot cake halvah lollipop. Sesame snaps chupa chups pudding. Sesame snaps danish tart cotton candy cheesecake liquorice. Dragée sweet jelly beans carrot cake cake chocolate bar cake sweet roll chocolate bar. Tiramisu cookie chocolate cake powder gingerbread pudding chupa chups tiramisu carrot cake. Apple pie cake jujubes. Lollipop icing cupcake carrot cake liquorice marzipan. Sesame snaps gummi bears jelly-o ice cream caramels wafer. Wafer donut tart jujubes chocolate chupa chups. Macaroon tart tootsie roll ice cream muffin croissant soufflé gingerbread. 
 
Dessert marzipan tart cheesecake donut. Wafer sweet jujubes gummi bears bear claw. Jelly beans candy canes gummi bears tootsie roll. Macaroon chocolate bar carrot cake fruitcake sweet roll danish sugar plum croissant candy canes. Tootsie roll icing candy oat cake chocolate bar dessert marzipan. Donut lemon drops gingerbread cake. Cotton candy fruitcake jujubes biscuit jelly donut pastry lollipop. Candy canes cheesecake liquorice toffee jelly. Marzipan tootsie roll lollipop. Chupa chups donut candy canes cotton candy icing tart muffin caramels. Tootsie roll toffee chocolate cake gummi bears. Cake macaroon candy canes muffin tootsie roll cupcake muffin halvah cake. Chocolate toffee gummi bears brownie soufflé jujubes marshmallow tart apple pie.</div> 
 
</div>

+0

うわー、これは役に立ちそうです(+1)、右のもの( 'Result')はテキストエリアではありません。 div要素です。テキスト領域にすることができない理由は、mathjaxを解析する必要があることです。 div要素のこの2つの作業も変更できると思います。 –

+0

@MulaKoSaag私は、あなたが説明したものによくマッチするように少しリファクタリングしました。 – jlowgren

関連する問題