HTML സ്ക്രോൾ ബോക്സ്

CSS, HTML എന്നിവ ഉപയോഗിച്ച് ടെക്സ്റ്റ് സ്ക്രോളുമായി ഒരു പെട്ടി സൃഷ്ടിക്കുക

ബോക്സ് അളവുകൾ കൂടുന്നതിനേക്കാൾ വലുതായി വലത് ഭാഗത്തും താഴെയുമായി സ്ക്രോൾ ബാറുകൾ ചേർക്കുന്ന ഒരു ബോക്സാണ് ഒരു HTML സ്ക്രോൾ ബോക്സ്. മറ്റൊരു രീതിയിൽ പറഞ്ഞാൽ, നിങ്ങൾക്ക് 50 വാക്കുകൾക്ക് അനുയോജ്യമായ ഒരു ബോക്സ് ഉണ്ടെങ്കിൽ, നിങ്ങൾക്ക് 200 വാക്കുകളുടെ വാചകമുണ്ടെങ്കിൽ, ഒരു HTML സ്ക്രോൾ ബോക്സ് നിങ്ങൾക്ക് അധികമായി 150 വാക്കുകൾ കാണിക്കാൻ സ്ക്രോൾ ബാറുകൾ കൂട്ടും. സാധാരണ HTML ൽ ബോക്സിൽ നിന്ന് അധിക പാഠം ഉളളൂ.

HTML സ്ക്രോൾ നിർമ്മിക്കുന്നത് വളരെ എളുപ്പമാണ്. നിങ്ങൾ സ്ക്രോൾ ചെയ്യാനാഗ്രഹിക്കുന്ന മൂലകത്തിന്റെ വീതിയും ഉയരവും സജ്ജമാക്കണം, തുടർന്ന് സ്ക്രോൾ ചെയ്യേണ്ടതെങ്ങനെയെന്നത് സജ്ജമാക്കുന്നതിന് CSS ഓവർഫ്ലോ സ്വമേധയാ ഉപയോഗിക്കുക.

എക്സ്ട്രാ വാചകം ഉപയോഗിച്ച് എന്തുചെയ്യണം?

നിങ്ങളുടെ ലേഔട്ടിലുള്ള സ്പെയ്സിൽ ഉൾക്കൊള്ളുന്നതിനേക്കാൾ കൂടുതൽ ടെക്സ്റ്റ് നിങ്ങൾക്ക് ഉണ്ടെങ്കിൽ, നിങ്ങൾക്ക് ചില ഓപ്ഷനുകൾ ഉണ്ട്:

മികച്ച ഓപ്ഷൻ ആണ് അവസാന ഓപ്ഷൻ: ഒരു സ്ക്രോളിംഗ് ടെക്സ്റ്റ് ബോക്സ് സൃഷ്ടിക്കുക. തുടർന്ന് അധിക പാഠം വായിക്കാൻ കഴിയും, പക്ഷേ നിങ്ങളുടെ ഡിസൈൻ അപഹരിക്കപ്പെട്ടിട്ടില്ല.

ഇതിന് HTML, CSS എന്നിവ ഇതാണ്:

ഇവിടെ വാചകം ....

ഓവർഫ്ലോ: ഓട്ടോ; പാഠം ബി.ഡിയുടെ അതിരുകൾ മറികടക്കാനായി അവ ആവശ്യമുണ്ടെങ്കിൽ സ്ക്രോൾ ബാറുകൾ ചേർക്കാൻ ബ്രൌസറിനെ അറിയിക്കുന്നു. എന്നാൽ ഇത് പ്രവർത്തിക്കാൻ, ഡിവിഡിയ്ക്കായി സജ്ജമാക്കിയ വീതിയും ഉയരവും ഉള്ള ശൈലികൾ ആവശ്യമാണ്, അതിലൂടെ അതിരുകൾ അതിലൂടെ കടന്നുപോകുന്നു.

ഓവർഫ്ലോ മാറ്റുന്നതിലൂടെ നിങ്ങൾക്ക് വാചകം ഒഴിവാക്കാം: auto; ഓവർഫ്ലോയ്ക്കായി: മറച്ചിരിക്കുന്നു. നിങ്ങൾ ഓവർഫ്ലോ സ്വത്ത് ഉപേക്ഷിക്കുകയാണെങ്കിൽ, ടെക്സ്റ്റ് ഡിവിഡിയുടെ പരിധിക്കകത്ത് നിറയും.

വെറും ടെക്സ്റ്റിനേക്കാൾ സ്ക്രോൾ ബാർ നിങ്ങൾക്ക് ചേർക്കാം

നിങ്ങൾക്ക് ചെറിയ സ്ഥലത്ത് പ്രദർശിപ്പിക്കാനാഗ്രഹിക്കുന്ന ഒരു വലിയ ചിത്രം നിങ്ങൾക്കുണ്ടെങ്കിൽ, നിങ്ങൾക്ക് ചുറ്റുമുള്ള സ്ക്രോൾ ബാറുകളും വാചകത്തിൽ തന്നെ ചേർക്കാവുന്നതാണ്.

< / p>

ഈ ഉദാഹരണത്തിൽ, 400x509 ചിത്രം 300x300 ഖണ്ഡികയ്ക്കുള്ളിലാണ്.

പട്ടിക സ്ക്രോൾ ബാറുകളിൽ പ്രയോജനപ്പെടുന്നു

വിവരങ്ങളുടെ ദൈർഘ്യമേറിയ പട്ടികകൾ വളരെ വേഗത്തിൽ വായിക്കാൻ വളരെ ബുദ്ധിമുട്ടാണ്, പക്ഷേ അവയെ പരിമിത വലുപ്പത്തിലുള്ള ഒരു ഡിവിഡിയിൽ ഇടുന്നതിലൂടെയും ഓവർഫ്ലോ സ്വത്തവകാശം ചേർക്കുന്നതിലൂടെയും നിങ്ങളുടെ പേജിൽ അങ്ങേയറ്റം ഇടം എടുക്കാത്ത ധാരാളം ഡാറ്റകളുള്ള പട്ടികകൾ ജനറേറ്റ് ചെയ്യാം. .

ലളിതമായ മാർഗ്ഗം ചിത്രങ്ങളും ടെക്സ്റ്റും പോലെയാണ്, മേശയിൽ നിന്ന് ഒരു ഡി ഡിഗ്രിയുണ്ടാക്കുക, ആ divത്തിന്റെ വീതിയും ഉയരവും സജ്ജമാക്കുക, ഓവർഫ്ലോ സ്വത്ത് ചേർക്കുക:

ഫോൺ ജെന്നിഫർ 502-5366 ....

നിങ്ങൾ ചെയ്യുമ്പോൾ സംഭവിക്കുന്ന ഒരു കാര്യം തിരശ്ചീനമായ സ്ക്രോൾ ബാർ സാധാരണയായി ദൃശ്യമാകുന്നു, കാരണം സ്ക്രോൾ ബാറുകളുടെ ക്രോം ടേബിൾ ഓവർലാപ് ചെയ്യുന്നുവെന്ന് ബ്രൌസർ കരുതുന്നു. പട്ടികയുടെ വീതിയും മറ്റുള്ളവയും മാറ്റുന്നതിൽ നിന്നും ഇത് പരിഹരിക്കാനുള്ള നിരവധി മാർഗങ്ങളുണ്ട്. എന്നാൽ എന്റെ പ്രിയപ്പെട്ടവയിൽ ഒരെണ്ണം തിരശ്ചീന സ്ക്രോളിങ് സി.എസ്.എസ്. ഓവർഫ്ലോ- x: മറയ്ക്കുക; ഡിവിഡിനു്, അതു് തിരശ്ചീനമായ സ്ക്രോൾ ബാർ നീക്കം ചെയ്യും. അപ്രത്യക്ഷമാകുന്ന ഉള്ളടക്കം ഉണ്ടായേക്കാവുന്നതിനാൽ ഇത് പരീക്ഷിച്ചു നോക്കുക.

ഫയർഫോക്സ് സപ്പോർട്ടുകൾ ഓവർഫ്ലോയ്ക്കായി ടിബിഡീ ടാഗുകൾ ഉപയോഗിക്കുന്നു

ഫയർഫോക്സ് ബ്രൌസറിൻറെ ഒരു നല്ല ഫീച്ചർ എന്നതാണ് ആഡ് ടേബിൾ ടാഗുകളിൽ tbody, thead അല്ലെങ്കിൽ tfoot പോലുള്ള ഓവർഫ്ലോ പ്രോപ്പർട്ടി ഉപയോഗിക്കാൻ. പട്ടികയുടെ ഉള്ളടക്കത്തിൽ സ്ക്രോൾ ബാറുകൾ സജ്ജീകരിക്കാൻ കഴിയുമെന്നതിനാലും, ഹെഡ്ഡർ സെല്ലുകൾ അവയ്ക്ക് മുകളിലായി അവശേഷിക്കുന്നു. ഇത് ഫയർഫോക്സിൽ മാത്രം പ്രവർത്തിക്കുന്നു, അത് വളരെ മോശമാണ്, പക്ഷെ നിങ്ങളുടെ വായനക്കാർക്ക് ഫയർഫോക്സ് ഉപയോഗിക്കുന്നെങ്കിൽ അത് നല്ലൊരു സവിശേഷതയാണ്. ഞാൻ എന്താണ് അർത്ഥമാക്കുന്നത് എന്ന് കാണാൻ ഈ ഉദാഹരണത്തിൽ Firefox ൽ കാണുക.

പേര് ഫോൺ
ജെന്നിഫർ 502-5366 ...