css - Is there a way to position page content UNDERNEATH or ON TOP OF a scrollbar? -

css - Is there a way to position page content UNDERNEATH or ON TOP OF a scrollbar? -

i'm trying emulate ctrl+f functionality chrome highlights matches on page in scrollbar, fields in form. using page offsets , percentages, have blocks of color correspond relative locations of fields on page.

in prototype, blocks of color sit down left of scrollbar. ideally, they'd sit down underneath scrollbar, , scrollbar's track transparent looks they're part of scrollbar track.

can default scrollbar set allow overflow content show underneath (or allow page content go on it)? know accomplished if rolled own scroll, i'd utilize default ones provided browser if @ possible.

it's clearest if @ prototype.

css:

::-webkit-scrollbar { width: 14px; height: 18px; background-color:transparent; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-track-piece { background:none; } ::-webkit-scrollbar-thumb { height: 6px; border: 4px solid rgba(0, 0, 0, 0); background-clip: padding-box; -webkit-border-radius: 7px; background-color: #333 } ::-webkit-scrollbar-button { width: 0; height: 0; display: none; } ::-webkit-scrollbar-corner { background-color: transparent; }

i thought of rendering matches on trackbar browsers today before. thought simple using linear-gradient background ::-webkit-scrollbar-track. did not seek implementing this. right after reading question, i've tried , looks it's not such easy.

you can utilize linear-gradient background ok, if seek rendering more 1 match (a line), can't rendered (especially when window's size changed) , line not rendered smoothly. such seems ok:

//render 2 lines, 1 @ 50px , other @ 100px background: linear-gradient(transparent 50px, reddish 50px, reddish 51px, transparent 51px, transparent 100px, reddish 100px, reddish 101px, transparent 101px);

but it's not stable, said when seek resizing window, @ size, line won't rendered (at to the lowest degree tried on opera). when window's height large, line becomes blurred (not sharp) , thicker. don't understand this, because color stops set fixedly (by px, not %). issue worse when number of lines larger. have linear-gradient many corresponding color stops. seems neat way solve problem. because of undesired issue, can't utilize approach.

the new approach: tried using multi-backgrounds feature instead. each background renders 1 line, background-size same background 2px height , background-position should different. here equivalent code (to above clean code) using approach:

background: linear-gradient(red, red), linear-gradient(red, red); background-repeat: no-repeat; background-size: 100% 2px; background-position: 0 50px, 0 100px;

the new approach of course of study requires browser has back upwards multi-backgrounds features (looks ie8- not back upwards cool feature).

so that's need solve problem. need find how apply style using script. can't select pseudo-element (or that) via script. can utilize window.getcomputedstyle() method read-only style of pseudo-element. have way modify css directly. that's using pure js help of document.stylesheets , cssrules. allow insert/remove/modify rule.

that looks great. there still issue. when changing style using method, style not applied right (at to the lowest degree happens ::-webkit-scrollbar-track, may not happen other elements). when move mouse on scrollbar, new style applied. i've found simple way invalidate scrollbar setting overflow of document.documentelement (the html) hidden , set auto. works well.

here code:

var requiredtb = $(".required input"); var invalids = requiredtb; var offsets = []; //init offsets highlight on trackbar later requiredtb.each(function() { offsets.push(($(this).offset().top)/document.body.scrollheight * 100); }); //find rule styling -webkit-scrollbar-track //we added in css stylesheet, done 1 time var sheets = document.stylesheets; var trackrule; for(var = 0; < sheets.length; i++){ var rules = sheets[i].cssrules || sheets[i].rules; for(var j = 0; j < rules.length; j++){ var rule = rules[j]; if(rule.selectortext == "::-webkit-scrollbar-track:vertical"){ trackrule = rule; break; } } } //define invalidate() method, need utilize method //to refresh scrollbars, otherwise newly applied style not affected window.invalidate = function(){ $(document.documentelement).css('overflow','hidden'); settimeout(function(e){ $(document.documentelement).css('overflow','auto'); },1); }; //this main function set style scrollbar track. function settrackhighlights(positions, color){ positions.sort();//ensure input array should ascendingly sorted. trackrule.style.csstext = ""; var gradient = "background: ", backpos = "background-position: "; var winheight = $(window).height(); $.each(positions, function(i,pos){ gradient += "linear-gradient(" + color + ", " + color + "),"; backpos += "0 " + pos + "%," }); gradient = gradient.substr(0,gradient.length-1) + ";"; backpos = backpos.substr(0,backpos.length -1) + ";"; trackrule.style.csstext += gradient + backpos + "background-repeat:no-repeat; background-size:100% 2px"; invalidate(); } //initially set highlights on trackbar settrackhighlights(offsets,'red'); //handle oninput event update highlights accordingly requiredtb.on('input', function(e){ var required = $(this).closest('.required'); var refreshhighlights = false; if(this.value && !required.is('.ok')) { required.addclass('ok'); refreshhighlights = true; invalids = invalids.not(this); } if(!this.value && required.is('.ok')) { required.removeclass('ok'); refreshhighlights = true; invalids = invalids.add(this); } if(refreshhighlights){ offsets.splice(0); invalids.each(function() { offsets.push(($(this).offset().top)/document.body.scrollheight * 100); }); settrackhighlights(offsets,'red'); } });

you have add together empty ::-webkit-scrollbar-track:vertical rule (we need deal vertical scrollbar) in css code, should appended @ lastly override similar rule before. can in fact utilize insertrule() method (of cssrulelist can accessed via cssrules property) add together new rule instead of looping through stylesheets, , through cssrules (of each sheet) find empty rule ::-webkit-scrollbar-track:vertical.

the code posted here can improved, such can add together method settrackhighlights allow add together more lines (instead of rendering lines each time need add/remove 1 line)...

note using term line, mean rendering representation of match on trackbar.

demo

css scroll scrollbar scrollbars