Jump to content
scienceguy

TWebBrowser: Remove Scrollbars not working

Recommended Posts

 

 

Dear all,

 

I am displaying html files in a TWebBrowser Component. My files are small enough that no scrollbars are required. However, I don't get to remove them.

 

Of course I searched and had a try with both the overflow parameter and Borderstyle. However, none of them seems to work. I read that I need to apply those commands AFTER the document has been loaded. Thats why I tried "OnDocumentComplete" as well as shortly after I display my document.

 

Thats my Code to display HTML code:

 

procedure TForm1.LoadHtmlCode(var filename:string);
VAR
   Doc: Variant;
   htmlcode:string;

begin

    // Load Htmlcode from File

    // init
    htmlcode:='';
    htmlcode:=TFile.ReadAllText(filename);


    if NOT Assigned(wbBrowser.Document) then
        wbBrowser.Navigate('about:blank');


    // Display HTML Code
    Doc := wbBrowser.Document;
    Doc.Clear;
    Doc.Write(htmlcode);
    Doc.Close;
    Doc.DesignMode := 'Off';

    WHILE wbBrowser.ReadyState < READYSTATE_INTERACTIVE
    DO Application.ProcessMessages;

    doc.body.style.fontFamily:='Arial';
    wbBrowser.OleObject.Document.bgColor := '#000000';
                                                       
end;
procedure TForm1.wbBrowserDocumentComplete(ASender: TObject;
  const pDisp: IDispatch; const URL: OleVariant);

begin

   	//wbBrowser.OleObject.Document.Body.Style.OverflowX := 'hidden';
  	//wbBrowser.OleObject.Document.Body.Style.OverflowY := 'hidden';

    wbBrowser.OleObject.Document.body.Style.BorderStyle := 'none';
	wbBrowser.OleObject.Document.body.Scroll := 'no';
    
end;


Has anyone an Idea ?

Many thanks !

Share this post


Link to post

Unfortunately that doesn't work.

 

Quote

<!DOCTYPE html>


<html>
  
<style>
  body{
	  overflow:hidden;
  }
</style>


<body>

<p style='margin-top:0cm;margin-right:0cm;margin-bottom:0cm;margin-left:0cm;line-height:107%;font-size:15px;font-family:"Calibri",sans-serif;text-align:justify;'>
blablablabla
 </p>

</body>

</html>

 

 

Share this post


Link to post

Only some browsers, like FireFox, allow you to remove the scrollbars!

Share this post


Link to post

Ok. So does this means that there is no possibility at all to remove a scrollbar in a TWebBrowser? There is an option "Select Engine". But only IEXPLORER and EDGE are available. But other browsers are installed on my pc.

Share this post


Link to post

You need to get familiar with how TWebBrowser works. It can either use Internet Explorer or Microsofts Chromium-based "WebView2" runtime, if it is installed and your application has the "WebView2Loader.dll" in its path.

 

If you are using Internet Explorer mode (and probably running in IE 7 mode), then you are correct, it will still show vertical scrollbars although the CSS says otherwise. In that case (if you really want to stick with the old Internet Explorer mode), you will need the non-html conforming <body scroll="no"> which Internet Explorer will understand:

twebbrowser_scroll_no.thumb.png.42ae0ec55a3cabd3b4b9cc9ccd87e07c.png

 

Share this post


Link to post

Besides the JavaScript, HTML or CSS solutions you can also use the Emulation.setScrollbarsHidden method in the DevTools protocol:

https://chromedevtools.github.io/devtools-protocol/tot/Emulation/#method-setScrollbarsHidden

 

If you use CEF4Delphi use this code :

procedure TForm1.HideScrollbars;
var
  TempParams : ICefDictionaryValue;
begin
  try
    TempParams  := TCefDictionaryValueRef.New;
    TempParams.SetBool('hidden', True);
    Chromium1.ExecuteDevToolsMethod(0, 'Emulation.setScrollbarsHidden', TempParams);
  finally
    TempParams := nil;
  end;
end;

If you use WebView4Delphi use this code :

procedure TForm1.HideScrollbars;
begin
  WVBrowser1.CallDevToolsProtocolMethod('Emulation.setScrollbarsHidden', '{"hidden":true}');
end;

 

Edited by salvadordf

Share this post


Link to post

Alternative solution to those posted so far:

uses
  Winapi.WebView2;

const
  cJavaScriptHideScrollbars = 'document.querySelector("body").style.overflow="scroll";var style=document.createElement("style");' +
    'style.type="text/css";style.innerHTML="::-webkit-scrollbar{display:none}";document.getElementsByTagName("body")[0].appendChild(style)';

constructor TForm1.Create(AOwner: TComponent);
var
  LWebView: ICoreWebView2;
begin
  inherited;
  // The following *should* work, but this report was not completely fixed!: https://quality.embarcadero.com/browse/RSP-38165
  if Supports(WebBrowser1, ICoreWebView2, LWebView) then
    LWebView.CallDevToolsProtocolMethod('Emulation.setScrollbarsHidden', '{"hidden":true}', nil);
  WebBrowser1.Navigate('https://www.embarcadero.com');
end;

procedure TForm1.WebBrowser1DidFinishLoad(ASender: TObject);
begin
  // This works for me, but the scrollbars do not disappear until the page is loaded
  WebBrowser1.EvaluateJavaScript(cJavaScriptHideScrollbars);
end;

This is when using EdgeIfAvailable or EdgeOnly for the WindowsEngine property

Edited by Dave Nottage

Share this post


Link to post
On 4/18/2023 at 9:11 AM, Der schöne Günther said:

You need to get familiar with how TWebBrowser works. It can either use Internet Explorer or Microsofts Chromium-based "WebView2" runtime, if it is installed and your application has the "WebView2Loader.dll" in its path.

 

If you are using Internet Explorer mode (and probably running in IE 7 mode), then you are correct, it will still show vertical scrollbars although the CSS says otherwise. In that case (if you really want to stick with the old Internet Explorer mode), you will need the non-html conforming <body scroll="no"> which Internet Explorer will understand:

twebbrowser_scroll_no.thumb.png.42ae0ec55a3cabd3b4b9cc9ccd87e07c.png

 

YES!! That works ! Finally !! 

 

Many thanks to all of you, you were a great help !

 

Cheers and enjoy your day

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×