사용자 정의 스크롤 막대의 기본 JS 캡슐화를 위한 코드 사례 공유
이 글에서는 사용자 정의 스크롤바를 캡슐화하는 네이티브 js 관련 지식을 주로 소개합니다. 매우 좋은 참조 값을 가지고 있습니다. 아래 에디터와 함께 살펴보겠습니다
최근 온라인 뮤직 플레이어를 만드는 프로젝트가 있었는데 스크롤바를 사용해야 하는데 내장된 스크롤바가 너무 보기 흉해서 직접 생각해 봤습니다.
원리를 온라인에서 읽었지만 솔직히 잘 이해가 되지 않아서 오늘 아침에 안드로이드를 사용하면서 공부했는데 결과는 꽤 만족스럽습니다. 그런 다음 객체 를 래핑합니다.
사용 방법은 매우 간단합니다. p를 사용자 정의하고 이 개체를 매개변수로 가져온 다음 새로 만들기를 클릭하면 됩니다. 스크롤 막대의 스타일을 직접 정의할 수도 있습니다. 스타일 시트를 직접 수정하세요.
렌더링:
코드는 다음과 같습니다:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
p{
padding:0px;
box-sizing:border-box;
margin:0px;
border:0px;
}
#p-5{
width: 700px;
height: 500px;
border:1px solid black;
position: relative;
overflow: hidden;
}
.ribbit-OF-p1{
width: 20px;
background-color: rgb(239, 238, 238);
border:1px solid rgba(0,0,0,0.5);
position: absolute;
right:0px;
top: 0px;
cursor:default;
}
.ribbit-OF-p2{
position: absolute;
top:0px;
right: 0px;
width: 100%;
height: 100px;
background-color:rgba(0,0,0,0.3);
border-radius: 10px;
}
.ribbit-OF-p3{
width: 100%;
height:auto;
background-color: lime;
}
</style>
<body>
<p id="p-1">
<p id="p-2">
</p>
</p>
<p id="p-3"><p id="p-4"></p></p>
<p id="p-5">
123123<br/>
qwe<br/>
12asd23<br/>
asd3123<br/>
qwe123<br/>
235423423<br/>
azxc123<br/>
123123<br/>
qwe<br/>
12asd23<br/>
asd3123<br/>
qwe123<br/>
235423423<br/>
azxc123<br/>
123123<br/>
qwe<br/>
12asd23<br/>
asd3123<br/>
qwe123<br/>
235423423<br/>
azxc123<br/>
123123<br/>
qwe<br/>
12asd23<br/>
asd3123<br/>
qwe123<br/>
235423423<br/>
azxc123<br/>
123123<br/>
qwe<br/>
12asd23<br/>
asd3123<br/>
qwe123<br/>
235423423<br/>
azxc123<br/>
123123<br/>
qwe<br/>
12asd23<br/>
asd3123<br/>
qwe123<br/>
235423423<br/>
azxc123<br/>123123<br/>
qwe<br/>
12asd23<br/>
asd3123<br/>
qwe123<br/>
235423423<br/>
azxc123<br/>
123123<br/>
qwe<br/>
12asd23<br/>
asd3123<br/>
qwe123<br/>
235423423<br/>
azxc123<br/>
123123<br/>
qwe<br/>
12asd23<br/>
asd3123<br/>
qwe123<br/>
235423423<br/>
azxc123<br/>
</p>
</body>
<script type="text/javascript">
var p_5 = document.getElementById('p-5');
function OverFlow(element){
this.element = element;
this.ribbit_OF_p1 = document.createElement("p");
this.ribbit_OF_p2 = document.createElement("p");
this.ribbit_OF_p3 = document.createElement("p");
this.createp = function(){
this.ribbit_OF_p1.className = "ribbit-OF-p1";
this.ribbit_OF_p2.className = "ribbit-OF-p2";
this.ribbit_OF_p3.className = "ribbit-OF-p3";
this.ribbit_OF_p3.innerHTML = this.element.innerHTML;
this.element.innerHTML="";
this.element.appendChild(this.ribbit_OF_p3);
this.ribbit_OF_p1.appendChild(this.ribbit_OF_p2);
document.body.appendChild(this.ribbit_OF_p1);
this.ribbit_OF_p1.style.height = getComputedStyle(this.element,null).height;
this.ribbit_OF_p1.style.left = (this.element.offsetLeft+(parseInt(getComputedStyle(this.element,null).width)
-parseInt(getComputedStyle(this.ribbit_OF_p1,null).width)))+"px";
this.ribbit_OF_p1.style.top = this.element.offsetTop+"px";
this.ribbit_OF_p2.style.top = "0px";
}
this.addAudo=function(){
var YY=null;//前鼠标位置
var topXX = 0;//前top位置
var topX = 0;//后top值
var vherght = parseInt(getComputedStyle(this.ribbit_OF_p3,null).height)-parseInt(getComputedStyle(this.element,null).height);//可移动
var dst = 0;
//最大top移动位置
var top_x = parseInt(getComputedStyle(this.ribbit_OF_p1,null).height)-parseInt(getComputedStyle(this.ribbit_OF_p2,null).height);
var thio = this;
window.onmousemove = function(e){
fun(e.clientY);
};
this.ribbit_OF_p2.onmousedown=function(e){
YY = e.clientY;
topXX =parseInt(this.style.top);
return false;
}
window.onmouseup=function(){
YY = null;
return true;
}
function fun(y){
if(top_x>=topX&&topX>=0&&YY!=null){
topX = y-YY+topXX;
if(topX<0)topX=0;
if(topX>top_x)topX=top_x-1;
thio.ribbit_OF_p2.style.top = (topX-1)+"px";
dst = topX*vherght/top_x;
thio.element.scrollTop = dst;
}
}
}
this.createp();
this.addAudo();
}
new OverFlow(p_5);
</script>
</html>위 내용은 사용자 정의 스크롤 막대의 기본 JS 캡슐화를 위한 코드 사례 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7563
15
1385
52
84
11
61
19
28
99
Netflix에서 맞춤형 아바타를 빠르게 설정하는 방법
Feb 19, 2024 pm 06:33 PM
Netflix의 아바타는 귀하의 스트리밍 정체성을 시각적으로 표현한 것입니다. 사용자는 기본 아바타를 넘어 자신의 개성을 표현할 수 있습니다. Netflix 앱에서 사용자 지정 프로필 사진을 설정하는 방법을 알아보려면 이 문서를 계속 읽어보세요. Netflix에서 사용자 정의 아바타를 빠르게 설정하는 방법 Netflix에는 프로필 사진을 설정하는 기능이 내장되어 있지 않습니다. 하지만 브라우저에 Netflix 확장 프로그램을 설치하면 이 작업을 수행할 수 있습니다. 먼저, 브라우저에 Netflix 확장 프로그램에 대한 사용자 정의 프로필 사진을 설치하세요. Chrome 스토어에서 구매하실 수 있습니다. 확장 프로그램을 설치한 후 브라우저에서 Netflix를 열고 계정에 로그인하세요. 오른쪽 상단에 있는 프로필로 이동하여
권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트
Apr 03, 2024 am 11:55 AM
얼굴 검출 및 인식 기술은 이미 상대적으로 성숙하고 널리 사용되는 기술입니다. 현재 가장 널리 사용되는 인터넷 응용 언어는 JS입니다. 웹 프런트엔드에서 얼굴 감지 및 인식을 구현하는 것은 백엔드 얼굴 인식에 비해 장점과 단점이 있습니다. 장점에는 네트워크 상호 작용 및 실시간 인식이 줄어 사용자 대기 시간이 크게 단축되고 사용자 경험이 향상된다는 단점이 있습니다. 모델 크기에 따라 제한되고 정확도도 제한됩니다. js를 사용하여 웹에서 얼굴 인식을 구현하는 방법은 무엇입니까? 웹에서 얼굴 인식을 구현하려면 JavaScript, HTML, CSS, WebRTC 등 관련 프로그래밍 언어 및 기술에 익숙해야 합니다. 동시에 관련 컴퓨터 비전 및 인공지능 기술도 마스터해야 합니다. 웹 측면의 디자인으로 인해 주목할 가치가 있습니다.
Eclipse에서 바로 가기 키 설정을 사용자 정의하는 방법
Jan 28, 2024 am 10:01 AM
Eclipse에서 바로 가기 키 설정을 사용자 정의하는 방법은 무엇입니까? 개발자로서 단축키를 익히는 것은 Eclipse에서 코딩할 때 효율성을 높이는 열쇠 중 하나입니다. 강력한 통합 개발 환경인 Eclipse는 다양한 기본 바로가기 키를 제공할 뿐만 아니라 사용자가 자신의 기본 설정에 따라 사용자 정의할 수도 있습니다. 이 기사에서는 Eclipse에서 바로 가기 키 설정을 사용자 정의하는 방법을 소개하고 특정 코드 예제를 제공합니다. Eclipse 열기 먼저 Eclipse를 열고 Enter를 누르십시오.
주식 분석을 위한 필수 도구: PHP 및 JS를 사용하여 캔들 차트를 그리는 단계를 알아보세요.
Dec 17, 2023 pm 06:55 PM
주식 분석을 위한 필수 도구: PHP 및 JS에서 캔들 차트를 그리는 단계를 배우십시오. 인터넷과 기술의 급속한 발전으로 주식 거래는 많은 투자자에게 중요한 방법 중 하나가 되었습니다. 주식분석은 투자자의 의사결정에 있어 중요한 부분이며 캔들차트는 기술적 분석에 널리 사용됩니다. PHP와 JS를 사용하여 캔들 차트를 그리는 방법을 배우면 투자자가 더 나은 결정을 내리는 데 도움이 되는 보다 직관적인 정보를 얻을 수 있습니다. 캔들스틱 차트는 주가를 캔들스틱 형태로 표시하는 기술 차트입니다. 주가를 보여주네요
PHP와 JS를 사용하여 주식 촛대 차트를 만드는 방법
Dec 17, 2023 am 08:08 AM
PHP와 JS를 사용하여 주식 캔들 차트를 만드는 방법 주식 캔들 차트는 주식 시장에서 흔히 사용되는 기술 분석 그래픽으로 시가, 종가, 최고가 등의 데이터를 그려서 투자자가 주식을 보다 직관적으로 이해할 수 있도록 도와줍니다. 주식의 최저 가격. 이 기사에서는 특정 코드 예제와 함께 PHP 및 JS를 사용하여 주식 캔들 차트를 만드는 방법을 설명합니다. 1. 준비 시작하기 전에 다음 환경을 준비해야 합니다. 1. PHP를 실행하는 서버 2. HTML5 및 Canvas를 지원하는 브라우저 3
edius 사용자 정의 화면 레이아웃의 작동 과정
Mar 27, 2024 pm 06:50 PM
1. 아래 그림은 edius의 기본 화면 레이아웃입니다. 기본 EDIUS 창 레이아웃은 가로 레이아웃이므로 단일 모니터 환경에서는 많은 창이 겹쳐져 있으며 미리보기 창은 단일 창 모드입니다. 2. [보기] 메뉴 바를 통해 [듀얼 윈도우 모드]를 활성화하면 미리보기 창에 재생 창과 녹음 창이 동시에 표시되도록 할 수 있습니다. 3. [보기 메뉴바>창 레이아웃>일반]을 통해 기본 화면 레이아웃을 복원할 수 있습니다. 또한, 자신에게 맞는 레이아웃을 사용자 정의하여 자주 사용하는 화면 레이아웃으로 저장할 수도 있습니다. 창을 자신에게 맞는 레이아웃으로 드래그한 후 [보기 > 창 레이아웃 > 현재 레이아웃 저장 > 새로 만들기]를 클릭한 후 팝업 [현재 레이아웃 저장] 레이아웃] 작은 창에 레이아웃 이름을 입력하고 확인을 클릭합니다.
Mac 시스템에서 스크롤 막대가 항상 표시되도록 설정하는 방법 - 스크롤 막대가 항상 표시되도록 설정하는 방법
Mar 18, 2024 pm 06:22 PM
최근 일부 친구가 Mac 시스템의 스크롤 막대를 항상 표시하도록 설정하는 방법에 대해 편집자에게 문의했습니다. 다음은 Mac 시스템의 스크롤 막대가 항상 표시되도록 설정하는 방법을 알려드립니다. . 1단계: 시스템 시작 메뉴에서 [시스템 환경설정] 옵션을 선택합니다. 3단계: 시스템 환경설정 페이지에서 [일반] 옵션을 선택하세요. 3단계: 일반 페이지에서 [항상]을 선택하면 스크롤바가 표시됩니다.
Excel에서 x축과 y축을 사용자 정의하는 방법은 무엇입니까? (Excel 축 눈금을 사용자 정의하는 방법)
Mar 14, 2024 pm 02:10 PM
엑셀 표에서는 데이터의 변화 추세를 보다 직관적으로 확인하기 위해 좌표축을 삽입해야 하는 경우가 있습니다. 아직 테이블에 좌표축을 삽입하는 방법을 모르는 친구들이 있습니다. 다음으로 Excel에서 좌표축 배율을 사용자 정의하는 방법을 알려 드리겠습니다. 좌표축 삽입 방법: 1. Excel 인터페이스에서 데이터를 선택합니다. 2. 삽입 인터페이스에서 클릭하여 세로 막대형 차트 또는 막대형 차트를 삽입합니다. 3. 확장된 인터페이스에서 그래픽 유형을 선택합니다. 4. 테이블의 마우스 오른쪽 버튼 클릭 인터페이스에서 데이터 선택을 클릭합니다. 5. 확장된 인터페이스에서 사용자 정의할 수 있습니다.
