How to hide web-page scrolls preserving scrolling functionality

Question

I have a specific task, which requires to hide web-page scrollbars in Chrome, but preserve scrolling functionality (with keys and mousewheel). Currently I use

document.documentElement.style.overflow = 'hidden';

but this effectively disables scrolling.

Does anyone can suggest another way to fulfil the task via javascript or WinAPIs?

The code is actually placed inside a Chrome extensions (content script), so many things impossible for ordinary pages can be involved. Also I have a plugin which does already subclass Chrome window (Chrome_RenderWidgetHostHWND) for other purposes, so even more complicated methods are also welcomed.

According to MS Spy the Chrome window contains WS_EX_RIGHTSCROLLBAR style even when the scripted style.overflow is set to hidden. This makes me think, that the restriction is applied by the browser internally, and can not be removed by WinAPI calls.

EDIT: I overlooked that WS_EX_RIGHTSCROLLBAR = 0x00000000, so it is implied by default and can not be eliminated.

EDIT2: I came across ::-webkit-scrollbar CCS styles, and it allows me for changing scrollbars width to 0! The scrollbar is not visible (just to distinguish this state to hidden) and works. Now the question is how can I change this style from javascript notation?

Answer 1

On the css way... I tried inserting some css on an allready loaded page and the scrollbars never changed?

chrome.tabs.insertCSS(tab.id,{code:"::-webkit-scrollbar {width: 0 !important; height: 0 !important}"});

...even tried attaching it to the head and that didnt work either....

insertNoScrollBars=function (){
 if(document.getElementById('HideScrollBars') == null){
      var headID = document.getElementsByTagName("head")[0];         
      var cssNode = document.createElement('style');
      cssNode.setAttribute('id','HideScrollBars');
      cssNode.innerText="::-webkit-scrollbar {width: 0 !important; height: 0 !important}"
      headID.appendChild(cssNode);
   }
}

chrome.tabs.query({'active': true, 'windowId': chrome.windows.WINDOW_ID_CURRENT},
   function(tab){
    chrome.tabs.executeScript(tab.id,{code:"("+insertNoScrollBars+")()"});
    //chrome.tabs.insertCSS(tab.id,{code:"::-webkit-scrollbar {width: 0 !important; height: 0 !important}"});
   }
);

Looking around it seems the scrollbars wont get updated unless theres some kind of refresh?....
http://userscripts.org/scripts/show/117089

One thing that did work tho (altho it might not suit your needs) was to inject the css using content script settings in the manifest....
manifest.json

{
  "name": "Hide scrollbars",
  "version": "1.0",
  "description": "As the name says",
  "permissions": [
    "bookmarks", "tabs", "<all_urls>"
  ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "css": ["mystyles.css"],
      "run_at" : "document_start"
    }
  ]
}

mystyles.css

::-webkit-scrollbar {width: 0 !important; height: 0 !important}

Or
If the only reason you want to inject it programmaticly is so you only inject it if your settings say to then you could inject it with a content script at document start.....
manifest.json

 {
  "name": "Hide scrollbars",
  "version": "1.0",
  "description": "As the name says",
  "permissions": [
    "<all_urls>"
  ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "run_at" : "document_start"
    }
  ]
}

content.js

// Do a check here to see if your settings say to hide the scrollbars or not
 if(document.getElementById('HideScrollBars') == null){
      var headID = document.documentElement;         
      var cssNode = document.createElement('style');
      cssNode.setAttribute('id','HideScrollBars');
      cssNode.innerText="::-webkit-scrollbar {width: 0 !important; height: 0 !important}"
      headID.appendChild(cssNode);
   }

Answer 2

I don't know anyhing about chrome extension programming. If i had to do it on a webpage i'd try to use the jquery plugin jScrollPane http://jscrollpane.kelvinluck.com/ with some custom css.