javascript - 如何隐藏网页滚动保留滚动功能

Question

我有一个特定的任务，需要在 Chrome 中隐藏网页滚动条，但保留滚动功能(使用按键和鼠标滚轮)。目前我在用

document.documentElement.style.overflow = '隐藏';

但这实际上会禁用滚动。

有没有人可以建议另一种方法来通过 javascript 或 WinAPI 完成任务？

代码实际上是放在一个Chrome扩展(content script)里面，可以涉及到很多普通页面不可能的东西。我还有一个插件，它已经将 Chrome 窗口 (Chrome_RenderWidgetHostHWND) 子类化用于其他目的，因此也欢迎使用更复杂的方法。

根据 MS Spy 的说法，Chrome 窗口包含 WS_EX_RIGHTSCROLLBAR 样式，即使脚本化的 style.overflow 设置为 hidden 也是如此。这让我觉得，限制是由浏览器内部应用的，不能通过 WinAPI 调用删除。

编辑: 我忽略了WS_EX_RIGHTSCROLLBAR = 0x00000000，所以默认隐含，不能去掉。

编辑2: 我遇到了 ::-webkit-scrollbar CCS 样式，它允许我将滚动条宽度更改为 0!滚动条不可见(只是为了区分此状态为隐藏)并且有效。现在的问题是如何从 javascript 符号更改此样式？

Answer 1

在CSS方式... 我尝试在已加载的页面上插入一些 css，但滚动条从未改变？

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

...甚至尝试将它固定在头上，但也没有用...

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}"});
   }
);

环顾四周，滚动条似乎不会更新，除非有某种刷新？....
http://userscripts.org/scripts/show/117089

但确实有效的一件事(虽然它可能不适合您的需要)是使用 list 中的内容脚本设置注入(inject) css....
list .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}

或者
如果你想以编程方式注入(inject)它的唯一原因是你只在你的设置要求时注入(inject)它，那么你可以在文档开始时用内容脚本注入(inject)它......
list .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);
   }