• Understanding DTD declarations from scrollTop compatibility issues

• • • • • • • • • • • • • • • • • • • • •

preface

This article started when a colleague reported to me that I was having trouble getting the scrollTop value while doing the page back to top feature. At the time, he observed that scrollTop was available on the 360 browser, but not on Chrome and Firefox. At that time, my first reaction was browser compatibility problem. I guessed that my colleague might use Document.body. scrollTop to get scrollTop and browse in 360 compatibility mode, because 360 compatibility mode is IE mode. Therefore, Chrome and Firefox cannot be obtained. After helping my colleague solve the problem, I concluded this article.

Conclusion first:

  • JQuery version back to the top$('html,body')
$('html,body').animate({ scrollTop: 0 }, 100);
Copy the code
  • Native compatible back to the top
/** * Sets the height of the page scrollbar *@param {Number} top* /
export function setPageScrollTop(top) {
  document.documentElement.scrollTop / * * / standard = top;
  window.pageYOffset /* Safari */ = top;
  document.body.scrollTop /* IE6/7/8 */ = top;
}

/** * gets the scrollbar height */
export function getPageScrollTop() {
  let doc = document;
  return (
    doc.documentElement.scrollTop / * * / standard || window.pageYOffset /* Safari */ || doc.body.scrollTop /* IE6/7/8 */ || 0
  );
}
var scrollTop =
  document.documentElement.scrollTop / * * / standard ||
  window.pageYOffset /* Safari */ ||
  document.body.scrollTop; /* IE6/7/8 */ || 0
Copy the code

The following describes the compatibility sources based on the above questions. Before we talk about the browser differences of scrollTop, let’s talk about DTDS.

DTD (Document Type Definition)

Document Type definitions (DTDS) define legal XML document building blocks. It uses a set of legal elements to define the structure of the document.

A DTD can be declared as a line in an XML document or as an external reference.

DTD purposes

  • With a DTD, an XML file can carry a description of its own format.

  • With DTDS, independent communities can consistently exchange data using a standard DTD.

  • You can use a standard DTD to validate data received from outside.

  • You can use a DTD to validate the data in the file itself.

How to use DTDS

Internal DOCTYPE declaration

Internal DOCTYPE declarations refer to the use of DTD declarations within XML documents.

  • Grammatical structure:<! DOCTYPE root [element declaration]>

Case study:

  • Familiar HTML declarations
<! -- HTML5 declaration -->
<! DOCTYPEhtml>
<html></html>

<! -- HTML4 declaration -->
<! DOCTYPEhtml PUBLIC "- / / / / W3C DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"></html>

Copy the code

  • Customize XML parsing

    • To define aNote typeThe document:<! DOCTYPE note []
    • defineNote typeDocument elements:<! ELEMENT note (to,from,heading,body)>
    • defineNote typeThe document element is of type"# PCDATA" typeSuch as:<! ELEMENT body (#PCDATA)>
<! Internal declaration DTD custom XML source file -->

      
<! DOCTYPEnote [
  <! ELEMENTnote (to.from.heading.body) >
  <! ELEMENTto      (#PCDATA) >
  <! ELEMENTfrom    (#PCDATA) >
  <! ELEMENTheading (#PCDATA) >
  <! ELEMENTbody    (#PCDATA) >] >
<note>
  <to>George</to>
  <from>John</from>
  <heading>Reminder</heading>
  <body>Don't forget the meeting!</body>
</note>
Copy the code

External document declaration

External document declaration means that instead of declaring DTD types directly inside an XML document, you do so by referring to an external DTD declaration file.

  • Grammatical structure:<! DOCTYPE root element SYSTEM "filename ">

Case study:

Rewrite the internal DOCTYPE declaration case above

<! -- note.dtd source file -->
<! ELEMENTnote (to.from.heading.body) >
<! ELEMENTto (#PCDATA) >
<! ELEMENTfrom (#PCDATA) >
<! ELEMENTheading (#PCDATA) >
<! ELEMENTbody (#PCDATA) >
Copy the code
<! Custom XML source file with external declaration DTD -->

      
<! DOCTYPEnote SYSTEM "note.dtd">
<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>
Copy the code

Special instructions

The difference between CDATA and PCDATA for the types of XML document elements

  • CDATA
    • Character Data: Character Data. The data source isText that will not be parsed by the parserTags in text are not treated as tags and entities are not expanded.
    • Used for property declarations.
    • Property values are character data.
    • CDATA is the type in an attribute declaration, which is a string, and ampersand, <, “, “, and “are parsed with special meanings, such as” parsed as double quotes.
  • PCDATA
    • Parsed character data: parsed character data. Data sources can be strings, child elements, strings, and child elements, yesText that will be parsed by the parser(e.g.,>To be written&gt;Can’t go wrong. , the text will be checked by the parser for entities and tags, the tags will be treated as tags, and the entities will be expanded.
    • Used for element declarations.
    • The content model illustrates that both text and elements can be present in an element.
    • PCDATA is a type in the element declaration. It refers to mixed types, which can contain child elements or strings. & and < are also parsed with special meaning. Parsed character data should not contain any &, <, or > characters; You need to replace them with &, <, and > entities, or an error will be reported.

HTML DTD

When you have a DTD for a page, or a DOCTYPE is specified, use document.documentElement(the root node of the entire node tree, or tag) to get the document object

When you don’t have a DTD for a page, or if you don’t have a DOCTYPE specified, use document.body(or tag) to get the document object

This is true in both IE and Firefox.

So regardless of whether the HTML source file has a DTD or not, it can be written as follows:

var scrollTop =
  document.documentElement.scrollTop / * * / standard ||
  window.pageYOffset /* Safari */ ||
  document.body.scrollTop; /* IE6/7/8 */ ||0
Copy the code

Differences between browsers

Each browser text is described in a DOM hierarchy.

DOM calls each object in a hierarchy a node, a hierarchy, you can think of it as a tree structure, like our directory, a root directory with subdirectories under the root and subdirectories under the subdirectories.

Take HTML hypertext Markup Language for example: The entire document is a root(tag) that can be accessed in the DOM using the Document.documentElement, which is the root of the entire tree of nodes. Body is a child node. To access the body tag, the script should say document.body.

  • The body is the body child of the DOM object, the tag;

  • DocumentElement is the root node (label) of the entire node tree.

ScrollTop IE6/7/8

For pages that do not have a docType declaration, use document.body.scrollTop

To have a doctype declaration page you can use the document. The documentElement. ScrollTop acquisition

When the page scroll bar is just at the top, window.pageYOffset returns undefined

The Safari scrollTop

Safari, in particular, has its own scrollTop function window.pageYOffset to get the value of scrollTop

Firefox scrollTop

Relative standard some browsers such as Firefox, can directly use the W3C standard method to obtain the document. The documentElement. ScrollTop

Compatible with getting scrollTop

For each browser, you can use logical and to get compatible values

var scrollTop =
  document.documentElement.scrollTop / * * / standard ||
  window.pageYOffset /* Safari */ ||
  document.body.scrollTop; /* IE6/7/8 */ || 0
Copy the code

conclusion

As can be seen from the above summary:

  • Ie6/7/8 retrieves the scrollTop through document.body
  • Safari retrieves scrollTop from window.pageYOffset
  • Standard browsers get scrollTop from document.documentElement

JQuery version back to the top$('html,body')

$('html,body').animate({ scrollTop: 0 }, 100);
Copy the code

Native compatible back to the top

/** * Sets the height of the page scrollbar *@param {Number} top* /
export function setPageScrollTop(top) {
  document.documentElement.scrollTop / * * / standard = top;
  window.pageYOffset /* Safari */ = top;
  document.body.scrollTop /* IE6/7/8 */ = top;
}

/** * gets the scrollbar height */
export function getPageScrollTop() {
  let doc = document;
  return (
    doc.documentElement.scrollTop / * * / standard || window.pageYOffset /* Safari */ || doc.body.scrollTop /* IE6/7/8 */ || 0
  );
}
var scrollTop =
  document.documentElement.scrollTop / * * / standard ||
  window.pageYOffset /* Safari */ ||
  document.body.scrollTop; /* IE6/7/8 */ || 0
Copy the code

Use $(‘ HTML,body’) directly to get the document

The related documents

  • Introduction of the DTD
  • The difference between CDATA and #PCDATA in XML
  • Understanding DTD declarations from scrollTop compatibility issues