Webkit Scrollbar Dynamic Styling

How to change the scrollbar styling via javaScript

Here is my solution:

The idea is to create a CSS stylesheet rule dynamically and update it while scrolling.

Here is the snippet I used to test in stackoverflow itself (by running it from the console directly):

// Based on https://stackoverflow.com/a/31126328/1941313
appendRule = (sheet) => {
  console.log({sheet});
  const len = sheet.cssRules.length;
  sheet.insertRule('body{}', len);
  return sheet.cssRules[len];
}

ruleForScroll = appendRule(Array.from(document.styleSheets).slice(-1)[0]);

randomColor = () => Math.floor(255 * Math.random());

component = document.querySelector('.left-sidebar--sticky-container.js-sticky-leftnav');

component.addEventListener("scroll", function wheelStyle() {
    ruleForScroll.selectorText = '.left-sidebar--sticky-container.js-sticky-leftnav::-webkit-scrollbar-track';
    ruleForScroll.style["background"] = `rgb(${randomColor()},${randomColor()},${randomColor()})`;
});

This specifically affects the side menu of stackoverflow, changing the scrollbar's color randomly while scrolling.

Here is an independent solution in a CodePen. Note that an important prerequisite for the style to apply is the following css rule:

.test::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: transparent;
}

How to modify the -webkit-scrollbar styles in a QWebView

Is possible using QWebSettings::setUserStyleSheetUrl, see example:

const QString path = PATH_OF_CSS_FILE;
QWebSettings *settings = QWebSettings::globalSettings();
settings->setUserStyleSheetUrl(QUrl(path));

Example

If dynamic CSS is a string, you can create a method and use QTemporaryFile, like this:

void MainWindow::setStyle(const QString data)
{
    QTemporaryFile file;
    if (file.open()) {
        const QString path = file.fileName();

        QWebSettings *settings = QWebSettings::globalSettings();
        settings->setUserStyleSheetUrl(QUrl(path));
    }
}

Usage:

setStyle("::-webkit-scrollbar-track { background-color:white;}")

If needs load dynamic file, you can create an alternative method like this:

void MainWindow::setStyle(const QUrl url)
{
    QWebSettings *settings = QWebSettings::globalSettings();
    settings->setUserStyleSheetUrl(url);
}

Using QRC

Is part of the answer is just a tip for other implementations;

You can use resources (QRC) in your project for put default stylesheet for all QWebViews, see example:

• Click right button in your project > Add New ... > Qt > Qt Resource File > Put name "resources.qrc"

• Click right button in "resources.qrc" > Open in Editor

• Put a CSS file with name scrollbar.css (css file must be in the same folder as your project).

Put this in your "main.cpp":

#include <QWebSettings>
#include <QUrl>

...

const QString path = "qrc:/scrollbar.css";
QWebSettings *settings = QWebSettings::globalSettings();
settings->setUserStyleSheetUrl(QUrl(path));

Style webkit scrollbar on certain state

Changing the background color works just fine for me.

http://jsfiddle.net/QcqBM/1

div#container:hover::-webkit-scrollbar {
    background: lightyellow;
}

Are you sure there isn't something else wrong with your CSS call?

Is it possible have dynamic scrollbar on an html element / tag?

A div element can have its own scrollbar. You can add this in through css so, if your panel creates a div and if that div has an ID that you can see at runtime, you can use target that ID with CSS to control the scrollbar using the overflow style. Also, to position the scrollbar according to user's browser, you may get your desired effect if you set a max-height on the div element.

CSS:

#myDiv {
    max-height: 100%;
    overflow: scroll;
}

JavaScript to change CSS dynamically when scrolling

The error was because I didn't add 'px' string when setting new CSS values.
So, the js code would be:

import './style.css'

function parallel_height_js(){
  let scroll_top = window.scrollY;
  let header_height = document.getElementsByClassName("sample-header-section")[0].clientHeight;
  document.getElementsByClassName("text-section")[0].style.marginTop = header_height+'px';
  document.getElementsByClassName("sample-header")[0].style.height = (header_height - scroll_top)+'px';
}
parallel_height_js();

window.onscroll = parallel_height_js;
window.onresize = parallel_height_js;

HTML:

<header>
        <div class="sample-header">
          <div class="...">
            <input type="checkbox" id="menu" />
            <label for="menu"></label>
            <div class="menu-content">
              <ul>
                <li><a href="">Contact</a> </li>
                <li><a href="">About Us</a> </li>
              </ul>
            </div>
          </div>
          <div class="sample-header-section">
            <h1>...</h1>
            <h2>...</h2>
          </div>
        </div>
      </header>

Display and hide scrollbar dynamically

Yes you can do that with jQuery.

Note that 83 is the keyCode for 'S'.

$(document).on('keyup', ev => {  if(ev.which === 83) $('html').toggleClass('hidden');});

#longDiv {  height: 200vh;  background: gray;}.hidden ::-webkit-scrollbar {  display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id='longDiv'></div>

---

Related Topics