如何隐藏网页滚动保留滚动功能答案

【问题标题】：How to hide web-page scrolls preserving scrolling functionality如何隐藏网页滚动保留滚动功能
【发布时间】：2012-02-13 19:58:31
【问题描述】：

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

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

但这实际上禁用了滚动。

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

代码其实是放在一个Chrome扩展（内容脚本）里面的，所以可以涉及到很多普通页面无法做到的事情。此外，我还有一个插件，它已经将 Chrome 窗口 (Chrome_RenderWidgetHostHWND) 子类化为其他用途，因此也欢迎使用更复杂的方法。

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

编辑：我忽略了WS_EX_RIGHTSCROLLBAR = 0x00000000，所以默认是隐含的，不能消除。

编辑2：我遇到了::-webkit-scrollbar CCS 样式，它允许我将滚动条宽度更改为 0！滚动条不可见（只是为了将此状态与隐藏区分开来）并且可以工作。现在的问题是如何从 javascript 表示法更改这种样式？

【问题讨论】：

您希望它适用于所有主流浏览器还是仅适用于 Chrome？
这仅适用于 Chrome。

标签： javascript winapi google-chrome google-chrome-extension scrollbar

【解决方案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

确实有效的一件事（尽管它可能不适合您的需求）是使用清单中的内容脚本设置注入 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"
    }
  ]
}

mystyles.css

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

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

【讨论】：

非常感谢您的扩展回答。我想写一种，但没那么详细。

【解决方案2】：

我对 chrome 扩展编程一无所知。如果我必须在网页上执行此操作，我会尝试使用带有一些自定义 css 的 jquery 插件 jScrollPane http://jscrollpane.kelvinluck.com/。

【讨论】：

我需要处理整个网页，而网页不是我的。这应该在用户浏览 Web 时起作用。

【解决方案3】：

jsFiddle 显然存在一些问题，但这对您来说是一个好的开始。我在这里使用了 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);
});

【讨论】：

我应该在页面上看到什么？按键被按下并记录，就像我在测试中所做的那样，但没有滚动。 ;-(
@Stan - 在这里，我添加了数字，以便您可以看到发生了什么。你在 Chrome 中对吗？ jsdo.it/tsherman/xrgI/fullscreen
是的，我使用 Chrome。现在我在你的页面上看到它，但我无法让它在我的页面上运行。那么下一个问题是我应该对我的页面应用不同的样式吗？如你所知，到目前为止我在这里使用overflowhidden。
@Stan - 我不能说为什么没有你的代码它对你不起作用。我还使用了该示例中隐藏的溢出。尝试将一些 console.logs 添加到代码中，看看是否有任何输出。尝试从控制台手动调用 $('body').scrollTop(some num) 以查看 settig 是否有效。 jsfiddle.net/mrtsherman/rbcJU
正如您在回答中预设的那样，我将您的代码更改为纯 javascript，当然可能会在某处出错。但是事件会记录在您的页面中，如果我删除overflow hidden，它会滚动。您的页面有点超载其他东西，所以我不能确定哪些添加使它滚动。插入带有overflowhidden 的简单页面，它对我不起作用。无论如何，谢谢你的想法。我找到了另一种我喜欢的解决方案 (CSS)，并立即使用它。

【解决方案4】：

你的意思是像这个？

　http://jsfiddle.net/DerekL/wZ5r2/

它有什么作用？

它所做的只是将 scrollTop 锁定到特定的 Y（或 X，如果需要）。

var scr = {
    ini: 0,
    locked: false,
    dis: function() {
        scr.ini = document.body.scrollTop;
        scr.locked = true;
        $(window).scroll(function() {
            if (scr.locked) {
                window.scrollTo(0, scr.ini);
            }
        })
    },
    en: function() {
        scr.locked = false;
    }
};

优势

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

希望对你有所帮助。

【讨论】：