lazarus.fresnel/demo/ScrollNested/MainUnit.pas

unit MainUnit;

{$mode objfpc}{$H+}

interface

uses
  Classes, SysUtils, Fresnel.Forms, Fresnel.DOM, Fresnel.Controls, Fresnel.Events, FCL.Events,
  Fresnel.DemoRadioButton;

type

  { TMainForm }

  TMainForm = class(TFresnelForm)
    procedure MainFormCreate(Sender: TObject);
  private
  public
    OuterDiv, InnerDiv, BoxDiv: TDiv;
    Label1: TLabel;
  end;

var
  MainForm: TMainForm;

implementation

{$R *.lfm}

{ TMainForm }

procedure TMainForm.MainFormCreate(Sender: TObject);

  function AddDiv(aName: string; aParent: TFresnelElement): TDiv;
  begin
    Result:=TDiv.Create(Self);
    Result.Name:=aName;
    Result.Parent:=aParent;
  end;

  function AddLabel(aName, aCaption: string; aParent: TFresnelElement): TLabel;
  begin
    Result:=TLabel.Create(Self);
    Result.Name:=aName;
    Result.Caption:=aCaption;
    Result.Parent:=aParent;
  end;

{  function AddRadioButton(aName, aCaption: string; aParent: TFresnelElement;
    const OnClick: TFresnelEventHandler = nil): TDemoRadioButton;
  begin
    Result:=TDemoRadioButton.Create(Self);
    Result.Name:=aName;
    Result.Caption:=aCaption;
    Result.Parent:=aParent;
    Result.AddEventListener(evtClick,OnClick);
  end;}

begin
  Stylesheet.Text:=':root { font-size: 15px; }'+LineEnding;

  OuterDiv:=AddDiv('OuterDiv',Self);
  OuterDiv.Style:='padding: 6px; border: 1px solid black; width: 200px; height: 200px; position: relative; overflow: scroll;';

  InnerDiv:=AddDiv('InnerDiv',OuterDiv);
  InnerDiv.Style:='border: 1px solid blue; width: 180px; height: 400px; position: absolute; left: 2px; top: 2px; overflow: scroll;';

  BoxDiv:=AddDiv('BoxDiv',InnerDiv);
  BoxDiv.Style:='border: 1px solid red; width: 160px; height: 600px; position: absolute; left: 2px; top: 2px;';

  Label1:=AddLabel('Label1','Fresnel',BoxDiv);
  Label1.Style:='color: #800;';
end;

end.