Commit aca8357b authored by Alexey's avatar Alexey

Initial commit

parents
.dem-cor{
width:50%;
height:100px;
overflow:auto;
}
.dem-cor{width:50%;height:100px;overflow:auto}
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>s-sto</title>
<script async src="s-sto.js"></script>
<link rel="stylesheet" href="s-sto.css">
<link rel="stylesheet" href="../s-res/s-res.css"/>
<link rel="stylesheet" href="../s-pag/s-pag.css"/>
<link rel="stylesheet" href="dem.css"/>
</head>
<body>
<div class="s-pag">
<h2>Core</h2>
<p>Mouse over on text</p>
<div class="dem-cor s-sto">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</div>
</div>
<body>
<html>
Element scroll top<br/>
class s-sto
.s-sto-lin:not(.s-sto-on) {
visibility: hidden;
}
.s-sto-lin.s-sto-on:not(.s-sto-sho){
visibility: hidden;
}
.s-sto-lin:after,
.s-sto-lin:before {
content: '';
position: absolute;
border: .5rem solid transparent;
}
.s-scr-bot:after,
.s-scr-bot:before {
border-top: .5rem solid rgba(88, 88, 88, 0.5);
}
.s-scr-top:after,
.s-scr-top:before {
border-bottom: .5rem solid rgba(88, 88, 88, 0.5);
}
.s-scr-bot:after {
top: .5rem;
}
.s-scr-top:before {
top: -.5rem;
}
.s-sto-wr {
position: relative;
}
.s-sto-lin {
position: absolute;
right: 0;
width: 1rem;
height: 1rem;
overflow:hidden;
background: rgba(255, 255, 255, 0.7);
border:.5rem solid transparent;
box-sizing: content-box;
outline: 1px solid #ccc;
}
.s-sto-lin:visited, .s-sto-lin:active, .s-sto-lin:link{
outline: 1px solid #ccc;
}
.s-sto-lin:hover {
background: #fff;
outline: 1px solid #999;
}
@keyframes sStoAdd {
from {
opacity: 0.99;
}
to {
opacity: 1;
}
}
.s-sto {
animation-duration: 0.001s;
animation-name: sStoAdd;
}
let sStoIni = function (tar) {
if (tar !== undefined) {
sStoIniTag(tar);
}
};
let sStoGetLin = function (ele) {
let par = ele.parentElement;
let num = ele.getAttribute('s-sto-num');
return par.querySelector('.s-sto-lin[s-sto-num="' + num + '"]');
};
let sStoIniTag = function (tag) {
let lin = sStoGetLin(tag);
if (tag.scrollHeight === tag.clientHeight) {
lin.classList.remove('s-sto-on');
lin.classList.remove('s-scr-top');
lin.classList.remove('s-scr-bot');
return;
}
if (tag.scrollTop) {
lin.classList.add('s-scr-top');
}
if (tag.scrollTop === 0) {
lin.classList.add('s-scr-bot');
}
lin.classList.add('s-sto-on');
};
let sStoNum = 0;
let sStoGetSto = function (ele) {
let num = ele.getAttribute('s-sto-num');
let par = ele.parentElement;
return par.querySelector('.s-sto[s-sto-num="' + num + '"]');
};
let sStolinCli = function (eve) {
eve.preventDefault();
let sto = sStoGetSto(this);
if (this.classList.contains('s-scr-bot')) {
sto.scrollTop = sto.scrollHeight - sto.clientHeight;
this.classList.remove('s-scr-bot');
this.classList.add('s-scr-top');
return false;
}
if (this.classList.contains('s-scr-top')) {
sto.scrollTop = 0;
this.classList.remove('s-scr-top');
this.classList.add('s-scr-bot');
return false;
}
};
let sStoAdd = function (eve) {
if (eve.animationName !== 'sStoAdd') {
return;
}
let lin = document.createElement('a');
lin.href = '#';
lin.setAttribute('s-sto-num', sStoNum);
eve.target.setAttribute('s-sto-num', sStoNum);
sStoNum++;
lin.classList.add('s-sto-lin');
lin.addEventListener("click", sStolinCli);
eve.target.parentElement.classList.add('s-sto-wr');
eve.target.after(lin);
let top = eve.target.offsetTop;
lin.style.top = top + 'px';
let lef = eve.target.offsetLeft;
lin.style.left = lef + 'px';
eve.target.onmouseover = function (event) {
lin.classList.add('s-sto-sho');
};
lin.onmouseover = function (event) {
lin.classList.add('s-sto-sho');
};
eve.target.onmouseout = function (event) {
lin.classList.remove('s-sto-sho');
};
lin.onmouseout = function (event) {
lin.classList.remove('s-sto-sho');
};
sStoIni(eve.target);
};
if (document.sStoAddReg === undefined) {
document.addEventListener("animationstart", sStoAdd);
document.addEventListener("MSAnimationStart", sStoAdd);
document.addEventListener("webkitAnimationStart", sStoAdd);
window.addEventListener('resize', sStoIni);
window.addEventListener('orientationChange', sStoIni);
document.sStoAddReg = true;
}
.s-sto-lin:not(.s-sto-on){visibility:hidden}.s-sto-lin.s-sto-on:not(.s-sto-sho){visibility:hidden}.s-sto-lin:after,.s-sto-lin:before{content:'';position:absolute;border:.5rem solid transparent}.s-scr-bot:after,.s-scr-bot:before{border-top:.5rem solid rgba(88,88,88,0.5)}.s-scr-top:after,.s-scr-top:before{border-bottom:.5rem solid rgba(88,88,88,0.5)}.s-scr-bot:after{top:.5rem}.s-scr-top:before{top:-.5rem}.s-sto-wr{position:relative}.s-sto-lin{position:absolute;right:0;width:1rem;height:1rem;overflow:hidden;background:rgba(255,255,255,0.7);border:.5rem solid transparent;box-sizing:content-box;outline:1px solid #ccc}.s-sto-lin:visited,.s-sto-lin:active,.s-sto-lin:link{outline:1px solid #ccc}.s-sto-lin:hover{background:#fff;outline:1px solid #999}@keyframes sStoAdd{from{opacity:.99}to{opacity:1}}.s-sto{animation-duration:.001s;animation-name:sStoAdd}
\ No newline at end of file
let sStoIni=function(a){if(a!==undefined){sStoIniTag(a)}};let sStoGetLin=function(a){let par=a.parentElement;let num=a.getAttribute("s-sto-num");return par.querySelector('.s-sto-lin[s-sto-num="'+num+'"]')};let sStoIniTag=function(a){let lin=sStoGetLin(a);if(a.scrollHeight===a.clientHeight){lin.classList.remove("s-sto-on");lin.classList.remove("s-scr-top");lin.classList.remove("s-scr-bot");return}if(a.scrollTop){lin.classList.add("s-scr-top")}if(a.scrollTop===0){lin.classList.add("s-scr-bot")}lin.classList.add("s-sto-on")};let sStoNum=0;let sStoGetSto=function(a){let num=a.getAttribute("s-sto-num");let par=a.parentElement;return par.querySelector('.s-sto[s-sto-num="'+num+'"]')};let sStolinCli=function(a){a.preventDefault();let sto=sStoGetSto(this);if(this.classList.contains("s-scr-bot")){sto.scrollTop=sto.scrollHeight-sto.clientHeight;this.classList.remove("s-scr-bot");this.classList.add("s-scr-top");return false}if(this.classList.contains("s-scr-top")){sto.scrollTop=0;this.classList.remove("s-scr-top");this.classList.add("s-scr-bot");return false}};let sStoAdd=function(a){if(a.animationName!=="sStoAdd"){return}let lin=document.createElement("a");lin.href="#";lin.setAttribute("s-sto-num",sStoNum);a.target.setAttribute("s-sto-num",sStoNum);sStoNum++;lin.classList.add("s-sto-lin");lin.addEventListener("click",sStolinCli);a.target.parentElement.classList.add("s-sto-wr");a.target.after(lin);let top=a.target.offsetTop;lin.style.top=top+"px";let lef=a.target.offsetLeft;lin.style.left=lef+"px";a.target.onmouseover=function(b){lin.classList.add("s-sto-sho")};lin.onmouseover=function(b){lin.classList.add("s-sto-sho")};a.target.onmouseout=function(b){lin.classList.remove("s-sto-sho")};lin.onmouseout=function(b){lin.classList.remove("s-sto-sho")};sStoIni(a.target)};if(document.sStoAddReg===undefined){document.addEventListener("animationstart",sStoAdd);document.addEventListener("MSAnimationStart",sStoAdd);document.addEventListener("webkitAnimationStart",sStoAdd);window.addEventListener("resize",sStoIni);window.addEventListener("orientationChange",sStoIni);document.sStoAddReg=true};
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment