Question

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

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

但这有效地禁用了滚动。

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

代码实际上放在Chrome扩展程序（内容脚本）中，因此普通页面可能涉及许多不可能的事情。另外我有一个插件，它已经将Chrome窗口（Chrome_RenderWidgetHostHWND）子类化为其他用途，因此也欢迎使用更复杂的方法。

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

编辑：我忽略了WS_EX_RIGHTSCROLLBAR = 0x00000000，因此默认隐含，无法消除。

EDIT2：我遇到了::-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

有一件事做得很好（尽管它可能不适合你的需要）是使用清单中的内容脚本设置注入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); }

Answer 2

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

Answer 3

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

Answer 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％的用户无法滚动页面。

希望它可以帮助你。

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

4 个答案:

它做什么？

优势