Javascript 如何隐藏网页滚动保存滚动功能

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

document.documentElement.style.overflow='hidden'

但这实际上禁用了滚动

是否有人可以建议通过javascript或WinAPI完成任务的其他方法

这段代码实际上是放在一个Chrome扩展（内容脚本）中的，因此可能涉及到许多普通页面无法做到的事情。此外，我还有一个插件，它已经为Chrome窗口（Chrome_RenderWidgetHostHWND）创建了子类以用于其他目的，因此，还欢迎使用更复杂的方法

据微软Spy称，Chrome窗口包含
WS_EX_RIGHTSCROLLBAR
样式，即使脚本
样式。溢出
设置为
隐藏
。这使我认为，限制是由浏览器内部应用的，不能通过WinAPI调用来删除

编辑：
我忽略了WS_EX_RIGHTSCROLLBAR=0x00000000，因此它是默认隐含的，不能消除

编辑2：
我遇到了
：：-webkit滚动条
CCS样式，它允许我将滚动条宽度更改为0！滚动条不可见（只是为了将此状态区分为隐藏状态）并且有效。现在的问题是，如何从javascript表示法更改这种样式？
JSFIDLE显然存在一些问题，但这对您来说是一个良好的开端。我在这里使用jQuery，因为它可以节省很多时间，但可以将其转换为纯javascript。我相信由于一些浏览器的问题，您需要同时绑定到
html
和
body
。我不想为你做这项工作，但如果你需要指导，请告诉我。或者，如果其他人想花时间写它，他们可以随意选择我的代码

//simulate mouse wheels. We us DOMMouseScroll for FF and mousewheel for all others
$('body').bind('mousewheel DOMMouseScroll', function(e) {
    var scrollTo = null;

    if (e.type == 'mousewheel') {
        scrollTo = (e.originalEvent.wheelDelta * -1);
    }
    else if (e.type == 'DOMMouseScroll') {
        scrollTo = 40 * e.originalEvent.detail;
    }

    if (scrollTo) {
        $(this).scrollTop($(this).scrollTop() + scrollTo);
    }
});

//monitor keypresses (you may want to use keypress or keydown instead). 
//remember that spacebar/shift-spacebar can also scroll screen full length.
$(document).keydown(function(e) {
    console.log(e.keyCode);
    var scrollTo = 120;

    if (e.keyCode == 40) {
        console.log('down');            
    }
    else if (e.keyCode == 38) {
        console.log('up');
        scrollTo *= -1;
    }
    else if (e.keyCode == 32) {
        console.log('spacebar');
        scrollTo = $(window).height();
    }

    $('body').scrollTop($('body').scrollTop() + scrollTo);
});

我对chrome扩展编程一无所知。如果我必须在网页上这样做，我会尝试使用jquery插件jScrollPane和一些自定义css。
你的意思是这样吗

　

它是干什么的？
它所做的只是将scrollTop锁定到一个特定的Y（或者X，如果你愿意的话）

优势

非常轻
也很容易理解
100%的用户将无法滚动页面

希望它能帮到你。
在css的路上。。。
我试着在allready加载的页面上插入一些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}"});
   }
);

环顾四周，滚动条似乎不会得到更新，除非有某种刷新？…


有一件事确实有效（尽管它可能不适合您的需要），那就是使用清单中的内容脚本设置注入css…

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"
    }
  ]
}

或

如果您希望以编程方式注入它的唯一原因是，只有在设置为的情况下才注入它，那么您可以在文档开始时用内容脚本注入它….

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"
    }
  ]
}

你想让它在所有主要的浏览器上都工作还是只在Chrome上工作？这只适用于Chrome。我需要在整个网页上工作，而这些网页不是我的。这应该在用户浏览网页时起作用。我应该在页面上看到什么？按键被按下并记录，就像在我的测试中一样，但没有滚动-（@Stan-在这里，我添加了一些数字，这样你就可以看到发生了什么。你使用的是Chrome，对吗？是的，我使用Chrome。现在我看到它在你的页面上工作，但我无法让它在我的页面上工作。所以下一个问题是，我应该在我的页面上应用不同的样式吗？正如你知道的，到目前为止，我在这里使用
溢出
隐藏
。@Stan-我说不出它为什么会这样做如果没有代码，esn将无法为您工作。在该示例中，我还使用了隐藏的溢出。请尝试向代码中添加一些console.log，看看是否有任何输出。尝试手动调用
$（'body'）。scrollTop（some num）
从控制台查看设置是否有效。正如您在回答中预先假定的那样，我将您的代码更改为纯javascript，当然可能会在那里出错。但是事件会被记录在您的页面中，如果我删除
溢出
隐藏
，它会滚动。您的页面有点过载，因此我可以不确定哪些内容会使它滚动。插入一个带有
溢出
隐藏
的简单页面，它对我不起作用。无论如何，谢谢你的想法。我找到了另一个解决方案（CSS）这是我喜欢的一种优雅，现在就使用它。非常感谢你的扩展答案。我想写一种，但不是那么详细。
::-webkit-scrollbar {width: 0 !important; height: 0 !important}

 {
  "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"
    }
  ]
}

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