Tutorial CSS 19 : Pengaturan Scrollbar HTML dengan CSS

0 0 Minggu, 09 Oktober 2016 Edit this post

Tutorial CSS ini membahas Pengaturan Scrollbar HTML dengan CSS. Mungkin ada kasus ketika konten sebuah elemen akan lebih besar dari jumlah ruang yang dialokasikan untuk itu.

Tutorial CSS ini membahas Pengaturan Scrollbar HTML dengan CSS. Mungkin ada kasus ketika konten sebuah elemen akan lebih besar dari jumlah ruang yang dialokasikan untuk itu. Misalnya, lebar diberikan dan tinggi sifat tidak memungkinkan cukup ruang untuk mengakomodasi konten dari elemen.

CSS memberikan sifat yang disebut melimpah yang memberitahu browser apa yang harus dilakukan jika isi kotak itu lebih besar dari kotak itu sendiri. Properti ini dapat mengambil salah satu dari nilai berikut -
ValueDeskripsi
visibleMemungkinkan konten overflow border yang mengandung elemen .
hiddenIsi dari elemen bersarang hanya memotong di perbatasan elemen yang mengandung dan tidak ada scrollbar terlihat.
scrollUkuran dari elemen yang berisi tidak berubah, tapi scrollbar ditambahkan untuk memungkinkan pengguna untuk menggulir untuk melihat konten.
autoTujuannya adalah sama dengan scroll, tapi scrollbar akan ditampilkan hanya jika konten tidak meluap.
Berikut adalah contoh :
<html>
   <head>
   </head>
   
      <style type="text/css">
         .scroll{
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:scroll;
         }
         .auto{
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:auto;
         }
      </style>
      
   <body>
   
      <p>Example of scroll value:</p>
      <div class="scroll">
      I am going to keep lot of content here just to show you how scrollbars works if there is an overflow in an 
      element box. This provides your horizontal as well as vertical scrollbars.
      </div>
      <br />
      
      <p>Example of auto value:</p>
      
      <div class="auto">
      I am going to keep lot of content here just to show you how scrollbars works if there is an overflow in an element box. 
      This provides your horizontal as well as vertical scrollbars.
      </div>
      
   </body>
</html>
Akan Terlihat hasilnya :

Label:

SHARE:

Twitter Facebook Google Pinterest

COMMENTS

BLOGGER
DISQUS
Nama

5G,2,8085,4,A Theory of Human Motivation,1,Administrasi Server,40,Adware,1,akuntansi,4,Alat Penguji Software,1,Algoritma,5,Algoritma Genetika,1,alkali tanah,1,Aluminium,1,Analis Kimia,3,Analisis Asimtotik,1,Android,5,Antenna,17,Antivirus,6,Aplikasi,20,Apps,1,Arduino,44,Aresnik,1,Array,1,Arsitektur Komputer,6,Arsitelktur Komputer,1,artikel,3,asam dan basa,2,atom,2,avogadro,1,bandwith,2,bash,2,Berita,10,BinProxy,1,biologi,1,boron,1,Bridge,1,Browser,2,Cahaya,1,catatan Hanibal Wijayanta,5,centos,2,Chrome Vanadium,1,CodeIgniter,7,cpu,1,CSS,18,CSS3,13,dasar akuntansi,4,Dasar Elektronika,23,Dasar Pengalamatan IPV6,8,dasat atom,1,Database,20,dhcp,1,DNS,1,Efek Hall,1,efek tyndall,1,Electrical circuit,1,electronica,1,Elektromagnet,1,Elektromagnetik,1,elektron,1,Elektronika,105,Elektronika Digital,51,elektronika komunikasi,1,energi,1,energi terbarukan,1,English Lecturer,1,enkripsi,1,Excel,10,expressjs,11,Firewall,2,Fisika,9,Forensik Digital,1,game,1,gelombang radio,1,Generator Listrik AC,1,Gerbang Logika,4,germanium,1,Google Chrome,2,grafik excel,1,gzip deflate,1,halogen,1,handbrake,1,Hanibal Wijayanta,7,Hardware,14,Headline,13,Helium,1,Hidrogen,1,hirarki kebutuhan maslow,1,hotspot,3,HTML,1,http,1,https,1,induktansi,2,induktor,4,Informasi,1,Inovasi,1,Internet,9,ipa,1,Iphone,1,ipv6,11,isotop,1,Jaringan Dasar,26,Jaringan Komputer,32,javascript,11,jquery,3,Kajian Islam,1,kalsium,1,Kapasitor,5,kapasitor elektrolit,1,kapasitor polarized,1,Kapasitor-tetap,1,kapasitor-variabel,1,karbon,1,Keamanan Internet,3,Keamanan Jaringan,24,Keamanan Komputer,1,Kemanan Internet,1,Kemanan Komputer,1,kernel,1,Kimia,40,kimia dasar,33,Klinik Virus,1,Komponen Elektronika,1,Komputer,12,Komputer Dasar,1,Komputer Terapan,59,Komunikasi,2,Komunikasi Data,11,kondensator,1,kromosom,1,lapbook,1,Laptop,1,Laptop gaming,1,Laravel,3,layer aplikasi,1,Layer Network,1,linux,9,LTE,4,macbook,1,Makro,6,Malware,6,Manajemen Router,1,mariadb,1,Masri Sitanggang,1,Matematika,1,Media Belajar,1,Media Transmisi,4,Mendikbud,1,merkuri,1,microsoft,1,Mikrokontroller,3,mikroskop elektron,1,Mikrotik,10,Mobile,8,modulasi,1,mojok,13,Mojok Bersama Danang,7,mojok. opini,1,motivasi,5,Multimedia,4,Mysql,19,Nasional,8,nginx,2,Nirkabel,1,nitrogen,2,nukleus,1,oauth,2,Office,5,oksidasi,1,opini,4,oracle,2,pemantulan,1,Pembiasan,1,Pemrograman,14,Pemrograman Android,1,Pemrograman Dasar,11,Pemrograman PHP,9,Pemrograman Shell,8,Pemrograman Web,42,Pendidikan,5,Penistaan,1,Perakitan Komputer,13,Permrograman PHP,1,Persamaan Linier,1,ph,1,PHP,11,PHP Framework,1,Physics,1,Power Supply,1,Pramuka,1,Processor,1,Propagasi,1,proses akuntansi,1,proteksi PDF,1,putty,1,Python,1,Rancang Bangun Jaringan,1,Rancang Bangun Jaringan LAN,2,Rancang Bangun Jaringan WAN,1,ransomware,2,reduksi,1,rehat,1,repository,1,Resistor,5,rip dvd,2,Router,2,s7,1,samsung,1,santai,1,sariroti,1,screencapture,1,sejarah,1,sejarah indonesia,2,Seluler,1,Semikonduktor,3,siklus akuntansi,1,silikon,1,Simulasi Digital,16,Sinyal,5,sirkuit,1,Sirkuit kapasitor,1,Sistem Komputer,8,Sistem Operasi,6,Sistem Operasi Jaringan,21,softskill,5,solar energy,1,spektroskopi,1,Spoofing,1,spu,5,SSH,1,STP,1,Struktur Data,2,Switch,1,switching,1,Teknologi,6,Teknologi Nirkabel,41,telkom,1,TestingWhiz,1,The dude,1,tipe konduktor,1,Tips dan Trik,21,Topologi,1,traffic light,1,transformator,4,Troubleshooting,1,Ubuntu,3,Unix,12,unsur,2,update,2,upgrade routeros,1,user manager,1,userman,1,Vanadium,1,variabel,1,variabel-kapasitor,1,VBA,7,vicon,1,video,1,Video Conference,1,virus,1,vlan,2,vlc,1,vpn,1,Wannacry,1,Warna,1,Webcam,1,Webmaster,51,webserver,1,wifi,1,Windows,11,WIndows 10,14,windows apps,1,Windows Explorer,1,Wireless,17,Wordpress,2,XII,1,XIITKJ,98,XITKJ,86,XTKJ,94,ybc,1,yum,1,
ltr
item
MasAgungLearning: Tutorial CSS 19 : Pengaturan Scrollbar HTML dengan CSS
Tutorial CSS 19 : Pengaturan Scrollbar HTML dengan CSS
Tutorial CSS ini membahas Pengaturan Scrollbar HTML dengan CSS. Mungkin ada kasus ketika konten sebuah elemen akan lebih besar dari jumlah ruang yang dialokasikan untuk itu.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDIQBtxEybpmUHdSbRpPL2_33rteboZdFwbWI7ke3WZ_TmiQYbTaY7PSG2fr7mtO3ciFsz3evCMOvrKXB1vf605VKI6Jmub8B7XipoPSDHYRv6IyVl3phfZ6y8aGfEH0PDh8_RyQQ_dNz6/s320/CSS3.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDIQBtxEybpmUHdSbRpPL2_33rteboZdFwbWI7ke3WZ_TmiQYbTaY7PSG2fr7mtO3ciFsz3evCMOvrKXB1vf605VKI6Jmub8B7XipoPSDHYRv6IyVl3phfZ6y8aGfEH0PDh8_RyQQ_dNz6/s72-c/CSS3.png
MasAgungLearning
https://masagunglearning.blogspot.com/2016/10/pengaturan-scrollbar-html-dengan-css.html
https://masagunglearning.blogspot.com/
https://masagunglearning.blogspot.com/
https://masagunglearning.blogspot.com/2016/10/pengaturan-scrollbar-html-dengan-css.html
true
3233199725437061161
UTF-8
Load Semua Posting Tidak ditemukan satupun LIHAT SEMUA Baca Lanjut Ulang Gagalkan Mengulang Hapus Oleh Home HALAMAN POSTING Lihat Semua DIREKOMENDASIKAN ANDA KATEGORI ARSIP PENCARIAN SEMUA POSTING Tidak ditemukan post apapun yang sesuai dari yang anda minta Kembali Ke Beranda Minggu Senin Selasa Rabu Kamis Jum'at Saturday Sun Mon Tue Wed Thu Fri Sat Januari Februari Maret April Mei Juni Juli Agustus September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy