Płótno z poziomym paskiem przewijania w js_of_ocaml

Question

Tworzę płótno w js_of_ocaml jak poniżej.

(* create document *) 
let document = Dom_html.window##document 

(* function to create canvas *) 
let create_canvas() = 
let canvas = Dom_html.createCanvas document in 
canvas##width <- 500; 
canvas##height <- 500; 
canvas 

(* create canvas *) 
let canvas = create_canvas() 

let start _ = 
    let main = get_main() in 
    Dom.appendChild main canvas; 
    Js._false in 

Dom_html.window##onload <- Dom_html.handler start 

Widzę tylko biały ekran.
Teraz chcę dodać poziomy pasek przewijania do obszaru roboczego.
Myślę, że muszę zrobić pudełko z poziomym paskiem przewijania, który jest mniejszy niż białe płótno, a białe płótno jest w pudełku.
Jak mogę to zrobić?

Answer 1

Możesz umieścić płótno w dziale, którego szerokość jest mniejsza niż szerokość płótna. Sprawdź poniższy kod:

module Html = Dom_html 

let doc = Html.window##document 

let create_div() = 
    let div = Html.createDiv doc in 
    div##style##width <- Js.string "500px"; 
    div##style##overflowX <- Js.string "scroll"; 
    div 


let create_canvas() = 
    let canvas = Dom_html.createCanvas document in 
    canvas##width <- 900; 
    canvas##height <- 900; 
    canvas 

let start _ = 
    let main = get_main() in 
    let wrapper = create_div() in 
    let canvas = create_canvas() in 
    Dom.appendChild wrapper canvas; 
    Dom.appendChild main wrapper; 
    Js._false in 

Dom_html.window##onload <- Dom_html.handler start 

Ten kod jest tłumaczenie na js_of_ocaml następnego jsfiddle: https://jsfiddle.net/pre1wacc/