HTML 5要素が部分的にスクロールされ、スクロールバーが非表示になります
12183 ワード
方法1,css 3の新しい特性-webkit-scrollbarを利用するが,この方式は火狐とIEに互換性がない
方法2、内外層のネストを利用して、シミュレーションして、すべてのブラウザを互換して、方法1に比べて比較的に面倒で、使用する時スクロールバーに対していかなるスタイルを宣言することができません
Reference:
[1]忘れられた優雅さ、HTML 5要素が部分的にスクロールし、スクロールバーを隠す、https://www.cnblogs.com/lovling/p/8000363.html
転載先:https://www.cnblogs.com/ryelqy/p/10868338.html
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> title>
head>
<style type="text/css">
#box {
width: 500px;
height: 300px;
overflow-x: hidden;
overflow-y: scroll;
line-height: 30px;
text-align: center;
}
#box::-webkit-scrollbar {
display: none;
}
style>
<body>
<div id="box">
br> br>
br> br>
br> br>
br> br>
br> br>
br> br>
br> br>
div>
body>
html>方法2、内外層のネストを利用して、シミュレーションして、すべてのブラウザを互換して、方法1に比べて比較的に面倒で、使用する時スクロールバーに対していかなるスタイルを宣言することができません
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> title>
head>
<style type="text/css">
#box {
/* , */
width: 500px;
height: 300px;
overflow: hidden;
}
#box > div {
/* 17 px, */
width: 517px;
height: 300px;
line-height: 30px;
text-align: center;
overflow-y: scroll;
}
style>
<body>
<div id="box">
<div>
br> br>
br> br>
br> br>
br> br>
br> br>
br> br>
br> br>
div>
div>
body>
html>Reference:
[1]忘れられた優雅さ、HTML 5要素が部分的にスクロールし、スクロールバーを隠す、https://www.cnblogs.com/lovling/p/8000363.html
転載先:https://www.cnblogs.com/ryelqy/p/10868338.html