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

How to hide web-page scrolls preserving scrolling functionality

本文关键字：滚动 网页 保留 功能 隐藏 何隐藏      更新时间：2023-09-26

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

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

但这有效地禁用了滚动。

有人能通过javascript或WinAPI提出另一种完成任务的方法吗？

代码实际上是放在Chrome扩展（内容脚本）中的，所以可能会涉及到许多普通页面无法实现的事情。此外，我有一个插件，它已经将Chrome窗口（ChromeRenderWidgetHostHWND）子类化用于其他目的，因此更复杂的方法也受到欢迎。

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

编辑：我忽略了WS_EX_RIGHTSCROLLBAR=0x0000000，所以它在默认情况下是隐含的，不能消除。

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

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

我对chrome扩展编程一无所知。如果必须在网页上进行，我会尝试使用jquery插件jScrollPanehttp://jscrollpane.kelvinluck.com/使用一些自定义css。

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

你是说像这个吗？

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%的用户将无法滚动页面

希望它能帮助你。

相关文章：