집 > 기사 > 웹 프론트엔드 > html 스크롤바 텍스트 영역 속성 설정_HTML/Xhtml_웹페이지 제작

html 스크롤바 텍스트 영역 속성 설정_HTML/Xhtml_웹페이지 제작

WBOY원래의: 2016-05-16 16:40:352184검색

1． Overflow 내용이 넘칠 때 설정(설정된 객체에 스크롤바 표시 여부 설정)
overflow-x 가로 내용이 넘칠 때 설정
overflow-y 세로 내용이 넘칠 때 설정
값 위의 세 가지 속성에 대해 설정된 것은 표시(기본값), 스크롤, 숨김, 자동입니다.
2． scrollbar-3d-light-color 3차원 스크롤 막대의 밝은 가장자리 색상(스크롤 막대의 색상 설정)
scrollbar-arrow-color 위쪽 및 위쪽의 삼각형 화살표 색상 아래쪽 버튼
scrollbar-base-color 스크롤바 기본 색상
scrollbar-dark-shadow-color 3차원 스크롤바의 강한 그림자 색상
scrollbar-face-color 색상 3차원 스크롤바의 돌출된 부분
scrollbar-highlight-color 스크롤바의 빈 부분의 색상
scrollbar-shadow-color 3차원 스크롤바 그림자의 색상
우리는 여러 예를 통해 위의 스타일 속성을 설명합니다:
1. 브라우저 창에 스크롤 막대가 나타나지 않도록 합니다.
가로 스크롤 막대 없음

코드 복사

코드는 다음과 같습니다.

🎜>
세로 스크롤바 없음

코드 복사 코드는 다음과 같습니다.

스크롤바 없음

코드 복사코드는 다음과 같습니다.

Overflow:hidden">

2. 여러 줄 텍스트 상자의 스크롤 막대 설정
가로 스크롤 막대 없음

코드 복사코드는 다음과 같습니다.

< ; /textarea> <div class="msgborder" id="phpcode133">
<br><br>세로 스크롤 막대 없음</div>
<br><br><br><div class="msgheader">
<div class="right">코드 복사<span style="CURSOR: pointer" onclick="copycode(getid('phpcode134'));"><u></u> 다음: </span>
</div> </div>< textarea style="overflow-y:hidden">< /textarea> <div class="msgborder" id="phpcode134">
<br><br>스크롤 막대 없음</div>
<br><br><br><div class="msgheader">
<div class="right">코드 복사<span style="CURSOR: pointer" onclick="copycode(getid('phpcode135'));"><u></u>코드는 다음과 같습니다.</span>
</div> </div><textarea style="overflow-x:hidden;overflow- y: Hidden">< /textarea> <div class="msgborder" id="phpcode135">또는< textarea style="overflow:hidden">< /textarea> <br><br><br>
</div>3. 창 스크롤 막대를 설정합니다. 색상 <br> <strong>창 스크롤바 색상을 빨간색으로 설정<body style="scrollbar-base-color:red"> </strong>scrollbar-base-color는 기본 색상만 설정합니다. 스크롤 막대의 색상을 변경하려면 이 속성을 설정하세요. <br>약간의 특수 효과 추가: <br><br><br><br><div class="msgheader">
<div class="right">코드 복사<span style="CURSOR: pointer" onclick="copycode(getid('phpcode136'));"><u></u>코드는 다음과 같습니다.</span>
</div> </div><body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon"> <div class="msgborder" id="phpcode136">
<br><br>
</div>4. 스타일 시트를 <br> <strong></strong><br><br><div class="msgheader">
<div class="right">코드 복사 <span style="CURSOR: pointer" onclick="copycode(getid('phpcode137'));"><u></u>코드는 다음과 같습니다.</span>
</div> </div><style> <div class="msgborder" id="phpcode137">.coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;} <br></style> <br><br><br>다음과 같이 호출하세요. 🎜></div>
<br><br><br><div class="msgheader">코드 복사<div class="right">
<span style="CURSOR: pointer" onclick="copycode(getid('phpcode138'));"><u>코드는 다음과 같습니다.</u></span> </div><textarea class="coolscrollbar ">< /textarea> </div>
<div class="msgborder" id="phpcode138">
<br>텍스트 영역 색상 및 테두리 설정: <br>
</div>
<br><br><br><div class="msgheader">코드 복사<div class="right">
<span style="CURSOR: pointer" onclick="copycode(getid('phpcode139'));"><u>코드는 다음과 같습니다.</u></span> </div><textarea style="border:red solid;border-width:1 1 1 1;color:#CCCCCC;">< /textarea> </div>
<div class="msgborder" id="phpcode139"></div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="HTML의 텍스트 영역 활용, 흔히 발생하는 문제와 사례분석_HTML/Xhtml_웹페이지 제작" href="http://m.php.cn/ko/faq/11725.html">HTML의 텍스트 영역 활용, 흔히 발생하는 문제와 사례분석_HTML/Xhtml_웹페이지 제작</a></span><span>다음 기사：<a class="dBlack" title="HTML의 텍스트 영역 활용, 흔히 발생하는 문제와 사례분석_HTML/Xhtml_웹페이지 제작" href="http://m.php.cn/ko/faq/11730.html">HTML의 텍스트 영역 활용, 흔히 발생하는 문제와 사례분석_HTML/Xhtml_웹페이지 제작</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="http://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="-6t+ed+2i-1n-4w"
     data-ad-client="ca-pub-5902227090019525"
     data-ad-slot="8966999616"></ins><script>     (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ko/faq/348757.html" title="HTML 지식 요약" class="aBlack">HTML 지식 요약</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348804.html" title="HTML을 빨리 배우는 방법" class="aBlack">HTML을 빨리 배우는 방법</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348873.html" title="html xhtml xml의 차이점" class="aBlack">html xhtml xml의 차이점</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348884.html" title="src와 href 속성의 차이점" class="aBlack">src와 href 속성의 차이점</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348902.html" title="HTML5 및 CSS 대체 사용 정보" class="aBlack">HTML5 및 CSS 대체 사용 정보</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5902227090019525"
     data-ad-slot="5027754603"></ins><script>     (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p></div><div class="footermid"><a href="http://m.php.cn/ko/about/us.html">회사 소개</a><a href="http://m.php.cn/ko/about/disclaimer.html">부인 성명</a><a href="http://m.php.cn/ko/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p>                © php.cn All rights reserved
            </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
    var _times = times || -1, //100次
    _interval = interval || 20, //20毫秒每次
    _self = this,
    _selector = this.selector, //选择器
    _iIntervalID; //定时器id
    if( this.length ){ //如果已经获取到了，就直接执行函数
        func && func.call(this);
    } else {
        _iIntervalID = setInterval(function() {
            if(!_times) { //是0就退出
                clearInterval(_iIntervalID);
            }
            _times <= 0 || _times--; //如果是正数就 --

_self = $(_selector); //再次选择
            if( _self.length ) { //判断是否取到
                func && func.call(_self);
                clearInterval(_iIntervalID);
            }
        }, _interval);
    }
    return this;
}
$("table.syntaxhighlighter").wait(function() {
    $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
      $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>