CSS ಮತ್ತು HTML ಬಳಸಿ ಸ್ಕ್ರೋಲಿಂಗ್ ಪಠ್ಯದೊಂದಿಗೆ ಬಾಕ್ಸ್ ರಚಿಸಿ
ಎಚ್ಟಿಎಮ್ಎಲ್ ಸ್ಕ್ರಾಲ್ ಬಾಕ್ಸ್ ಪೆಟ್ಟಿಗೆಯ ವಿಷಯಗಳು ಬಾಕ್ಸ್ ಆಯಾಮಗಳಿಗಿಂತ ದೊಡ್ಡದಾಗಿರುವಾಗ ಬಲಭಾಗದ ಮತ್ತು ಕೆಳಭಾಗಕ್ಕೆ ಸ್ಕ್ರಾಲ್ ಬಾರ್ಗಳನ್ನು ಸೇರಿಸುವ ಬಾಕ್ಸ್. ಬೇರೆ ಪದಗಳಲ್ಲಿ ಹೇಳುವುದಾದರೆ, ನೀವು ಸುಮಾರು 50 ಪದಗಳಿಗೆ ಸರಿಹೊಂದುವ ಪೆಟ್ಟಿಗೆಯನ್ನು ಹೊಂದಿದ್ದರೆ, ಮತ್ತು ನೀವು 200 ಪದಗಳ ಪಠ್ಯವನ್ನು ಹೊಂದಿದ್ದರೆ, ಹೆಚ್ಚುವರಿ 150 ಪದಗಳನ್ನು ನೋಡುವಂತೆ HTML ಸ್ಕ್ರಾಲ್ ಬಾಕ್ಸ್ ಸ್ಕ್ರಾಲ್ ಬಾರ್ಗಳನ್ನು ಹಾಕುತ್ತದೆ. ಸ್ಟ್ಯಾಂಡರ್ಡ್ ಎಚ್ಟಿಎಮ್ಎಲ್ನಲ್ಲಿ ಅದು ಪೆಟ್ಟಿಗೆಯ ಹೊರಗೆ ಹೆಚ್ಚುವರಿ ಪಠ್ಯವನ್ನು ತಳ್ಳುತ್ತದೆ.
ಎಚ್ಟಿಎಮ್ಎಲ್ ಸ್ಕ್ರಾಲ್ ಮಾಡುವುದು ತುಂಬಾ ಸುಲಭ. ನೀವು ಸ್ಕ್ರಾಲ್ ಮಾಡಲು ಬಯಸುವ ಅಂಶದ ಅಗಲ ಮತ್ತು ಎತ್ತರವನ್ನು ನೀವು ಹೊಂದಿಸಬೇಕಾಗುತ್ತದೆ ಮತ್ತು ನಂತರ ಸ್ಕ್ರೋಲಿಂಗ್ ಸಂಭವಿಸುವಂತೆ ನೀವು ಹೊಂದಿಸಲು ಸಿಎಸ್ಎಸ್ ಓವರ್ ಫ್ಲೋ ಆಸ್ತಿ ಬಳಸಿ.
ಹೆಚ್ಚುವರಿ ಪಠ್ಯದೊಂದಿಗೆ ಏನು ಮಾಡಬೇಕೆ?
ನಿಮ್ಮ ವಿನ್ಯಾಸದ ಜಾಗದಲ್ಲಿ ನೀವು ಹೊಂದಿಕೊಳ್ಳುವಷ್ಟು ಹೆಚ್ಚು ಪಠ್ಯವನ್ನು ಹೊಂದಿರುವಾಗ, ನಿಮಗೆ ಕೆಲವು ಆಯ್ಕೆಗಳಿವೆ:
- ಪಠ್ಯವನ್ನು ಕಡಿಮೆ ಮಾಡಿ ಇದರಿಂದ ಅದು ಕಡಿಮೆ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ.
- ಪಠ್ಯವನ್ನು ಮಿತಿ ಮೀರಿ ಹರಿಯುವಂತೆ ಅನುಮತಿಸಿ ಮತ್ತು ವಿನ್ಯಾಸವನ್ನು ಬೆಂಬಲಿಸಲು ಅದನ್ನು ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ ಎಂದು ಭಾವಿಸುತ್ತೇವೆ.
- ಇದು ಉಕ್ಕಿಹರಿಯುವ ಪಠ್ಯವನ್ನು ಕತ್ತರಿಸಿ.
- ಸ್ಕ್ರಾಲ್ ಬಾರ್ಗಳನ್ನು (ಸಾಮಾನ್ಯವಾಗಿ ಪಠ್ಯಕ್ಕಾಗಿ ಲಂಬವಾಗಿ) ಸೇರಿಸಿ ಇದರಿಂದ ಹೆಚ್ಚುವರಿ ಪಠ್ಯವನ್ನು ತೋರಿಸಲು ಸ್ಪೇಸ್ ಸ್ಕ್ರಾಲ್ಗಳು.
ಅತ್ಯುತ್ತಮ ಆಯ್ಕೆ ಸಾಮಾನ್ಯವಾಗಿ ಕೊನೆಯ ಆಯ್ಕೆಯಾಗಿದೆ: ಸ್ಕ್ರೋಲಿಂಗ್ ಪಠ್ಯ ಪೆಟ್ಟಿಗೆ ರಚಿಸಿ. ನಂತರ ಹೆಚ್ಚುವರಿ ಪಠ್ಯವನ್ನು ಇನ್ನೂ ಓದಬಹುದು, ಆದರೆ ನಿಮ್ಮ ವಿನ್ಯಾಸವು ರಾಜಿಯಾಗಿಲ್ಲ.
ಇದಕ್ಕಾಗಿ HTML ಮತ್ತು CSS ಆಗಿರುತ್ತದೆ:
ಓವರ್ಫ್ಲೋ: ಸ್ವಯಂ; ಪಠ್ಯವನ್ನು ವಿಭಾಗದ ಸುತ್ತುಗಳನ್ನು ಸುರಿಯುವುದನ್ನು ತಡೆಯಲು ಸ್ಕ್ರಾಲ್ ಬಾರ್ಗಳನ್ನು ಸೇರಿಸಲು ಬ್ರೌಸರ್ಗೆ ಹೇಳುತ್ತದೆ. ಆದರೆ ಇದು ಕೆಲಸ ಮಾಡಲು, ನೀವು ಡಿವಿನಲ್ಲಿ ಹೊಂದಿಸಲಾಗಿರುವ ಅಗಲ ಮತ್ತು ಎತ್ತರ ಶೈಲಿಯ ಗುಣಲಕ್ಷಣಗಳ ಅಗತ್ಯವಿರುತ್ತದೆ, ಇದರಿಂದಾಗಿ ಓವರ್ಫ್ಲೋಗೆ ಮಿತಿಗಳಿವೆ.
ಓವರ್ಫ್ಲೋ ಅನ್ನು ಬದಲಾಯಿಸುವ ಮೂಲಕ ನೀವು ಪಠ್ಯವನ್ನು ಕತ್ತರಿಸಬಹುದು: ಸ್ವಯಂ; ಓವರ್ಫ್ಲೋಗೆ: ಮರೆಮಾಡಲಾಗಿದೆ; ನೀವು ಓವರ್ಫ್ಲೋ ಆಸ್ತಿಯನ್ನು ಬಿಟ್ಟುಹೋದರೆ, ಪಠ್ಯವು ವಿಭಾಗದ ಮಿತಿಗಿಂತಲೂ ಚೆಲ್ಲುತ್ತದೆ.
ಕೇವಲ ಪಠ್ಯಕ್ಕಿಂತ ಹೆಚ್ಚು ನೀವು ಸ್ಕ್ರೋಲ್ ಬಾರ್ಗಳನ್ನು ಸೇರಿಸಬಹುದು
ನೀವು ಚಿಕ್ಕ ಸ್ಥಳದಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲು ಬಯಸುವ ದೊಡ್ಡ ಇಮೇಜ್ ಇದ್ದರೆ, ನೀವು ಪಠ್ಯದೊಂದಿಗೆ ನೀವು ಬಯಸುವ ರೀತಿಯಲ್ಲಿಯೇ ಸ್ಕ್ರಾಲ್ ಬಾರ್ಗಳನ್ನು ಸೇರಿಸಬಹುದು.
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, 400x509 ಚಿತ್ರವು 300x300 ಪ್ಯಾರಾಗ್ರಾಫ್ನಲ್ಲಿದೆ.
ಟೇಬಲ್ಸ್ ಸ್ಕ್ರಾಲ್ ಬಾರ್ಗಳಿಂದ ಲಾಭವಾಗಬಹುದು
ಮಾಹಿತಿಯ ಉದ್ದನೆಯ ಕೋಷ್ಟಕಗಳು ಬೇಗನೆ ಓದಲು ಬಹಳ ಕಷ್ಟಕರವಾಗಬಹುದು, ಆದರೆ ಅವುಗಳನ್ನು ಒಂದು ಸೀಮಿತ ಗಾತ್ರದ DIV ಒಳಗೆ ಇರಿಸಿ ನಂತರ ಓವರ್ಫ್ಲೋ ಆಸ್ತಿಯನ್ನು ಸೇರಿಸುವ ಮೂಲಕ, ನಿಮ್ಮ ಪುಟದಲ್ಲಿ ತೀವ್ರವಾದ ಜಾಗವನ್ನು ತೆಗೆದುಕೊಳ್ಳದಿರುವ ಸಾಕಷ್ಟು ಡೇಟಾವನ್ನು ನೀವು ಕೋಷ್ಟಕಗಳನ್ನು ರಚಿಸಬಹುದು. .
ಸುಲಭವಾದ ವಿಧಾನವು ಚಿತ್ರಗಳು ಮತ್ತು ಪಠ್ಯದೊಂದಿಗೆ ಹೋಲುತ್ತದೆ, ಮೇಜಿನ ಸುತ್ತಲೂ ಒಂದು DIV ಅನ್ನು ಸೇರಿಸಿ, ಆ ವಿಭಾಗದ ಅಗಲ ಮತ್ತು ಎತ್ತರವನ್ನು ಹೊಂದಿಸಿ, ಮತ್ತು ಓವರ್ಫ್ಲೋ ಆಸ್ತಿ ಸೇರಿಸಿ:
ಸ್ಕ್ರಾಲ್ ಬಾರ್ಗಳ ಕ್ರೋಮ್ ಟೇಬಲ್ ಅನ್ನು ಅತಿಕ್ರಮಿಸುತ್ತದೆ ಎಂದು ಬ್ರೌಸರ್ ಊಹಿಸುತ್ತದೆಯಾದ್ದರಿಂದ, ನೀವು ಇದನ್ನು ಮಾಡುವಾಗ ಸಂಭವಿಸುವ ಒಂದು ವಿಷಯವೆಂದರೆ ಅಡ್ಡಲಾಗಿರುವ ಸ್ಕ್ರಾಲ್ ಬಾರ್. ಟೇಬಲ್ ಮತ್ತು ಇತರರ ಅಗಲವನ್ನು ಬದಲಿಸುವುದರಿಂದ ಇದನ್ನು ಸರಿಪಡಿಸಲು ಹಲವು ಮಾರ್ಗಗಳಿವೆ. ಆದರೆ ಸಿಎಸ್ಎಸ್ 3 ಆಸ್ತಿ ಓವರ್ಫ್ಲೋ-ಎಕ್ಸ್ನೊಂದಿಗೆ ಸಮತಲ ಸ್ಕ್ರೋಲಿಂಗ್ ಅನ್ನು ಸರಳವಾಗಿ ಆಫ್ ಮಾಡುವುದು ನನ್ನ ಮೆಚ್ಚಿನ. ಕೇವಲ ಓವರ್ಫ್ಲೋ-ಎಕ್ಸ್ ಅನ್ನು ಸೇರಿಸಿ: ಮರೆಮಾಡಲಾಗಿದೆ; div ಗೆ, ಮತ್ತು ಇದು ಸಮತಲವಾದ ಚಲನಪಟ್ಟಿಕೆಯನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ. ಕಣ್ಮರೆಯಾಗುವ ವಿಷಯವನ್ನು ಹೊಂದಿರುವುದರಿಂದ ಇದನ್ನು ಪರೀಕ್ಷಿಸಲು ಮರೆಯದಿರಿ.
ಫೈರ್ಫಾಕ್ಸ್ ಓವರ್ಲೋಗೆ TBODY ಟ್ಯಾಗ್ಗಳು ಬಳಸುವುದನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ
ಫೈರ್ಬಾಕ್ಸ್ ಬ್ರೌಸರ್ನ ಒಂದು ನಿಜವಾಗಿಯೂ ಉತ್ತಮ ಲಕ್ಷಣವೆಂದರೆ, ನೀವು ಟಾಬಿ ಮತ್ತು ಥ್ಯಾಡ್ ಅಥವಾ ಟಿಫೂಟ್ ಮುಂತಾದ ಆಂತರಿಕ ಟೇಬಲ್ ಟ್ಯಾಗ್ಗಳಲ್ಲಿ ಓವರ್ಫ್ಲೋ ಆಸ್ತಿಯನ್ನು ಬಳಸಬಹುದಾಗಿದೆ. ಇದರರ್ಥ ನೀವು ಮೇಜಿನ ವಿಷಯಗಳ ಮೇಲೆ ಸ್ಕ್ರಾಲ್ ಬಾರ್ಗಳನ್ನು ಹೊಂದಿಸಬಹುದು, ಮತ್ತು ಹೆಡರ್ ಕೋಶಗಳು ಅವುಗಳ ಮೇಲೆ ಲಂಗರುಗಳಾಗಿರುತ್ತವೆ. ಇದು ಫೈರ್ಫಾಕ್ಸ್ನಲ್ಲಿ ಮಾತ್ರ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಇದು ತುಂಬಾ ಕೆಟ್ಟದ್ದಾಗಿರುತ್ತದೆ, ಆದರೆ ನಿಮ್ಮ ಓದುಗರು ಫೈರ್ಫಾಕ್ಸ್ ಅನ್ನು ಮಾತ್ರ ಬಳಸಿದರೆ ಅದು ಉತ್ತಮ ವೈಶಿಷ್ಟ್ಯವಾಗಿದೆ. ಫೈರ್ಫಾಕ್ಸ್ನಲ್ಲಿ ಈ ಉದಾಹರಣೆಯನ್ನು ಬ್ರೌಸ್ ಮಾಡಿ ನಾನು ಏನು ಎಂದು ನೋಡೋಣ.
| ಹೆಸರು | ಫೋನ್ |
|---|---|
| ಜೆನ್ನಿಫರ್ | 502-5366 ...
|