☰

사용자 정의 웹킷 스크롤 막대를 비활성화하는 방법이 있습니까?

tag-icon • tag-icon browser css user-interface
사용자 정의 웹킷 스크롤 막대를 비활성화하는 방법이 있습니까?

Google Chrome과 같은 Webkit 기반 브라우저에서 스크롤 막대의 사용자 정의를 비활성화하거나 되돌리는 확장 프로그램, 사용자 정의 사용자 스타일시트 등이 있습니까? 나는 평범한 기본 스크롤 막대를 좋아하지만 CSS로 스타일을 지정하면 다시 표시되도록 하는 CSS 조합을 찾을 수 없는 것 같습니다.

답변1

안타깝게도 CSS는 일단 활성화되면 "비활성화"하거나 되돌릴 수 없습니다.

::-webkit-scrollbar는 기본 스타일을 얻기 위해 단순히 재정의할 수 없으며 이를 수행하는 유일한 방법은 코드에서 모든 ::-webkit-scrollbar 규칙을 제거하는 것입니다. 이 시점에서 스크롤 가능 영역은 스크롤 막대를 다시 그려야 합니다. 그렇게 하려면 신속하게 display:none을 추가하고 제거해야 합니다. Overflow:hidden;에서 또는 동일한 작업을 수행합니다. 스크롤 가능한 요소에. 첫 번째 문제는 페이지를 로드할 때마다 페이지가 흰색으로 깜박인다는 것입니다. 두 번째는 페이지 오버플로의 요소를 확인해야 하므로 리소스 집약적입니다. 이상적이지 않습니다.

위의 링크는 사용자 정의 막대를 완전히 제거하여 스크롤 막대가 없는 스크립트에서 가져온 것입니다.

답변2

바이너리 클린 텍스트 편집기나 16진수 편집기에서 웹 브라우저 실행 파일을 열고 "webkit-scrollbar"를 모두 "webkit-scrollb4r"과 같은 다른 정크로 바꾸십시오. 방금 Chrome으로 이것을 시도했는데 문제가 해결되었습니다.

답변3

@bumfo의 답변을 받아 크롬에서 이 보안 문제를 해결했습니다.https://stackoverflow.com/questions/49161159/uncaught-domException-failed-to-read-the-rules-property-from-cssstylesheet

이것을 콘솔에 붙여넣으면 스크롤 막대가 다시 나타납니다.

for (var sheetI = 0; sheetI < document.styleSheets.length; ++sheetI) {
    var sheet = document.styleSheets[sheetI];
    try {
        var ruleSet = sheet.rules || sheet.cssRules;
        for (var i = 0; i < ruleSet.length; ++i) {
            var rule = ruleSet[i];
            if (/scrollbar/.test(rule.selectorText)) {
                sheet.deleteRule(i--);
            }
        }
    } catch (e) {
        console.warn("Can't read the css rules of: " + sheet.href, e);
    }
};

다음은 이를 포함하는 Chrome 확장 프로그램입니다.https://chrome.google.com/webstore/detail/default-scrollbar/nkjmoagfbmeafonfhbkeicjdhjlofplo

그리고 그 github 저장소는 다음과 같습니다:https://github.com/ubershmekel/default-scrollbar

답변4

참고: 이 답변은 2015년에 마지막으로 테스트되었으며 최신 환경에서는 작동하지 않을 수 있습니다.

아래 코드는 일치하는 모든 CSS 규칙을 제거하는 사용자 스크립트입니다 ::-webkit-scrollbar.

// ==UserScript==
// @name         My Fancy Scrollbar Userscript
// @namespace    http://your.homepage/
// @version      0.1
// @description  enter something useful
// @author       You
// @match        http://*/*
// @grant        none
// ==/UserScript==

[].forEach.call(document.styleSheets, function(sheet) {
    for (var i = 0; i < sheet.rules.length; ++i) {
        var rule = sheet.rules[i];
        if (/::-webkit-scrollbar/.test(rule.selectorText)) {
            sheet.deleteRule(i--);
        }
    }
});

관련 정보