如何在特定的寬度和高度內使用javascript向上滾動文本並向下滾動向下滾動

Question

在JavaScript中我很新，我用它來創建一個交互式網站，但有一個問題。因爲我剛開始我所知道的是如何warpText我的內容，我不知道我怎麼能在JavaScript中的代碼具有函數，如果在給定的寬度和高度wrapText溢出。一個向上和向下滾動會出現，並幫助導航那些不是場景的。

這是我使用：

function wrapText(text, x, y, maxWidth, lineHeight) 
{ 
    var words = text.split(''); 
    var line = ''; 
    for(var n = 0; n < words.length; n++) 
    { 
    var testLine = line + words[n] + ''; 
    var metrics = content.measureText(testLine); 
    var testWidth = metrics.width; 
    if(testWidth > maxWidth) 
    { 
     context.fillText(line, x, y); 
     line = words[n] + '';y += lineHeight; 
    } 
    else { 
      line = textLine; 
     } 
    } 
context.fillText(line, x, y); 
} 

在功能抽獎：

wrapText(currentText, 45, 460, 800, 20); 

Answer 1

這裏的my jsFiddle solution。我認爲您的解決方案只需要普通的HTML/CSS：

HTML：

<div id="foo" class="wrap">...</div> 

而且你的CSS：

#foo { 
    width: 400px; 
    height: 300px; 
    background-color: yellowgreen; 
} 

.wrap { 
    overflow-y: auto; 
}