html 태그 overflow 속성 과 javascript 구현 div 태그 스크롤 문제
그의 jsp 파일 을 가 져 오 면 javascript 코드 는 아무런 문제 가 없습니다. 문 제 는 html 태그 overflow 속성 에 있 습 니 다. 일반적으로 스크롤 디 스 플레이 를 설정 하 는 div 는 이 값 을 설정 합 니 다. 이 속성 을 설정 하지 않 으 면 javascript 의 순환 스크롤 디 스 플레이 코드 는 효과 가 없 으 며 출력 scrollTop 값 도 0 입 니 다.
일반적으로 html 에 css 를 직접 쓰 는데 이 문제 가 발생 하지 않 습 니 다.그러나 많은 css 는 외부 에 쓰 여 있 습 니 다. 때로는 많은 속성 값 이 내장 되 어 있 습 니 다. 특히 클래스 속성 설정 은 스크롤 이 필요 한 div 의 overflow 속성 이 설정 되 지 않 았 습 니 다.이렇게 하면 페이지 가 굴 러 가지 않 고 대부분 bug 는 자바 script 코드 를 쳐 다 보 며 잘못 배열 되 었 습 니 다.이렇게 하면 실 수 를 찾 지 못 하고 많은 시간 을 소비 하기 쉽다.
javascript 에서 순환 스크롤 을 실현 하 는 것 도 간단 합 니 다. 전체 div 의 빈 틈 없 는 스크롤 디 스 플레이 라면 저 는 같은 div 계단 2 개 로 이 루어 집 니 다.
<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title> </title>
</head>
<body>
<div id="label1" onmouseover="stop()" onmouseout="start()">
<div id="label2" style="overflow:hidden;height:80">
<font color="#FF0000" size="5"> </font><br>
<font color="#00FF00" size="5"> </font><br>
<font color="#FFFF00" size="5"> </font><br>
<font color="#00FF00" size="5"> </font><br>
<font color="#0000FF" size="5"> </font><br>
<font color="#00FF00" size="5"> </font><br>
<font color="#808000" size="5"> </font><br>
<font color="#00FF00" size="5"> </font><br>
<font color="#800000" size="5"> </font><br>
<font color="#FF00FF" size="5"> </font><br>
</div>
<div id="label3" style="overflow:hidden;height:1"></div></div>
<script language="javascript" defer>
// div
function getobj(element)
{
return document.getElementById(element);
}
// div
var toplabel=getobj("label2");
var bottomlabel=getobj("label3");
// div
MAX_HEIGHT=80;
MIN_HEIGHT=1;
//
var t;//
var speed=5;//
var height=MAX_HEIGHT;//top div
var bottomheight=MIN_HEIGHT;//bottom div
bottomlabel.innerHTML=toplabel.innerHTML;// top bottom，
function move()
{
// top scrollTop+offsetHeight top div scrollHeight 。topdiv ， top div style.height
if ((toplabel.scrollTop+toplabel.offsetHeight)>=toplabel.scrollHeight)
{
toplabel.style.height=height-=speed;
bottomlabel.style.height=bottomheight+=speed; // top heigth bottom height， ， 。
if (height<MIN_HEIGHT){ //top height 0 ， ， top scrollTop bottom offsetTop。
toplabel.scrollTop=bottomlabel.offsetTop;
toplabel.style.height=height=MAX_HEIGHT;
bottomlabel.style.height=bottomheight=MIN_HEIGHT; // top bottom height ， top scrollTop， 。
}
}
toplabel.scrollTop+=speed;
t=setTimeout(move,100); // ， top scrollTop。
}
// ， 。 ，
move();
function stop()
{
clearTimeout(t);
}
function start()
{
t=setTimeout(move,100);
}
</script>
</body>
</html>더 간편 한 방법 은 최상 위 div 의 scrollTop 값 을 bottomlabel. offset Height 값 을 직접 빼 고 출발점 값 을 얻어 다시 순환 하 는 것 이다.
<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title> </title>
</head>
<body>
<div id="label1" onmouseover="stop()" onmouseout="start()" style="overflow:hidden;height:160">
<div id="label2" >
<font color="#FF0000" size="5"> </font><br>
<font color="#00FF00" size="5"> </font><br>
<font color="#FFFF00" size="5"> </font><br>
<font color="#00FF00" size="5"> </font><br>
<font color="#0000FF" size="5"> </font><br>
<font color="#00FF00" size="5"> </font><br>
<font color="#808000" size="5"> </font><br>
<font color="#00FF00" size="5"> </font><br>
<font color="#800000" size="5"> </font><br>
<font color="#FF00FF" size="5"> </font><br>
</div>
<div id="label3"></div></div>
<div id="text"></div>
<script language="javascript" defer>
// div
function getobj(element)
{
return document.getElementById(element);
}
// div
var toplabel=getobj("label2");
var bottomlabel=getobj("label3");
var label=getobj("label1");
var text=getobj("text");
//
var t;//
var speed=5;//
bottomlabel.innerHTML=toplabel.innerHTML;// top bottom，
function move()
{
// label scrollTop toplabel.scrollHeight ， label scrollTop 。
if (label.scrollTop>=toplabel.scrollHeight)
{
label.scrollTop-=bottomlabel.offsetHeight;
}
label.scrollTop+=speed;
t=setTimeout(move,100); // ， top scrollTop。
}
// ， 。 ，
move();
function stop()
{
clearTimeout(t);
}
function start()
{
t=setTimeout(move,100);
}
</script>
</body>
</html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
