Advertisement
DailyJapaneseThread

Autoscrolling HTML (Styled)

Mar 23rd, 2016
2,254
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.26 KB | None | 0 0
  1. <html>
  2.  
  3. <head>
  4.  
  5. <style type="text/css">
  6. body {
  7. background-color: #202020;
  8. color: #ffffff;
  9. font-size: 1.5em;
  10. font-weight: 400;
  11. font-family: "";
  12. }
  13. </style>
  14.  
  15. <script>
  16. //------------------------
  17.  
  18. //To change background color or text color, just replace the style values above with the hex values for the colors you want.
  19. //To change font size, just change the em value to what works for you (the standard size is 1, I like it at 1.5).
  20. //To change font weight (boldness), just edit the value above. 100 is quite thin, 400 is default, 900 is quite thick. You may want it higher than default for Mincho fonts.
  21.  
  22. //To change the font itself, put the ENGLISH name of your font in between the quotation marks above (some JP font names are in Japanese, such as "三次元切絵字").
  23. //To find the English name of a given font, first install it, then open Firefox.
  24. //Go to about:preferences#content in the address bar, then click on the 'Default font' drop-down menu.
  25. //The "correct" name of your font will be listed here - just copy that down and paste it up above.
  26.  
  27. //Note that if you are fine with whatever font you have now then you can just leave the quotation marks above blank and the default font will be used.
  28. //Your default is probably Gothic - if you want to try out a good Mincho font, try Aozora Mincho at http://www.freejapanesefont.com/aozora-mincho-download/
  29. //For various other free Japanese fonts, visit http://www.freejapanesefont.com/
  30. //For more font attribute information visit http://www.w3schools.com/css/css_font.asp
  31.  
  32. //------------------------
  33.  
  34. /**** Fun Stuff that you need to copy into your page ****/
  35. document.addEventListener("DOMNodeInserted", function () {
  36. var LEEWAY = 200; // Amount of "leeway" pixels before latching onto the bottom.
  37.  
  38. // Some obscene browser shit because making sense is for dweebs
  39. var b = document.body;
  40. var offset = b.scrollHeight - b.offsetHeight;
  41. var scrollPos = (b.scrollTop+offset);
  42. var scrollBottom = (b.scrollHeight - (b.clientHeight+offset));
  43.  
  44. // If we are at the bottom, go to the bottom again.
  45. if (scrollPos >= scrollBottom - LEEWAY) {
  46. window.scrollTo(0,document.body.scrollHeight);
  47. }
  48.  
  49. }, false);
  50. /**** End of the Fun Stuff ****/
  51. </script>
  52. </head>
  53.  
  54.  
  55. <body>
  56.  
  57. </body>
  58.  
  59.  
  60. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement