Как скрыть прокрутки веб-страниц, сохраняя функциональность прокрутки - PullRequest
Новая
       11

Как скрыть прокрутки веб-страниц, сохраняя функциональность прокрутки

3 голосов
/ 13 февраля 2012

У меня есть особая задача, которая требует скрыть полосы прокрутки веб-страниц в Chrome, но сохранить функциональность прокрутки (с помощью клавиш и колесика мыши). В настоящее время я использую

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

, но это эффективно отключает прокрутку.

Кто-нибудь может предложить другой способ выполнить задачу через JavaScript или WinAPI?

Код фактически находится внутри расширений Chrome (контент-скрипта), поэтому многие обычные страницы могут быть недоступны. Также у меня есть плагин, который уже делает подкласс окна Chrome (Chrome_RenderWidgetHostHWND) для других целей, так что приветствуются даже более сложные методы.

Согласно MS Spy, окно Chrome содержит стиль WS_EX_RIGHTSCROLLBAR, даже если для сценария style.overflow установлено значение hidden. Это заставляет меня думать, что ограничение применяется браузером внутренне и не может быть снято вызовами WinAPI.

EDIT: Я упустил из виду, что WS_EX_RIGHTSCROLLBAR = 0x00000000, поэтому он подразумевается по умолчанию и не может быть устранен.

EDIT2: Я столкнулся с ::-webkit-scrollbar стилями CCS, и это позволяет мне изменять ширину полосы прокрутки до 0! Полоса прокрутки не видна (просто чтобы отличить это состояние от скрыто ) и работает. Теперь вопрос в том, как я могу изменить этот стиль с нотации JavaScript?

Ответы [ 4 ]

3 голосов
/ 14 февраля 2012

на пути ксс ... Я пытался вставить некоторые 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);
   }
1 голос
/ 14 февраля 2012

Я ничего не знаю о программировании расширений Chrome.Если бы мне пришлось сделать это на веб-странице, я бы попытался использовать плагин jquery jScrollPane http://jscrollpane.kelvinluck.com/ с некоторыми пользовательскими CSS.

1 голос
/ 14 февраля 2012

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);
});
0 голосов
/ 14 февраля 2012

Вы имеете в виду, как это ?

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% пользователей не смогут прокрутить страницу.

Надеюсь, это поможет вам.

...