时间戳

首页 > 解决方案 > Javascript ScrollLeft 什么都不做

javascript - Javascript ScrollLeft 什么都不做

问题描述

我正在尝试做一件聪明的事情，如果您在移动设备上放大，文本会重新排列为更大并且不需要水平滚动。我只是不能让 scrollLeft 或它的任何迭代工作。我在响应模式下在 chrome 中测试它，以获得你必须放大一次的效果。

setInterval(() => {
  pointerup_handler();
}, 2000) // this will be very short in the future ;;



function init() {
  let thisupdate = (window.innerWidth / window.visualViewport.scale);

  let html = document.getElementsByTagName("html")[0];
  let body = document.getElementsByTagName("body")[0];
  let texttable = document.getElementById("texttable")

  html.style.width = thisupdate + "px";
  body.style.width = thisupdate + "px";
  document.getElementById("texttable").style.width = thisupdate + "px";
}


let lastupdate = (window.innerWidth / window.visualViewport.scale);
function pointerup_handler(ev) {

  let thisupdate = (window.innerWidth / window.visualViewport.scale);

  if (Math.abs(thisupdate - lastupdate) > 10) {
    lastupdate = thisupdate;

    let html = document.getElementsByTagName("html")[0];
    let body = document.getElementsByTagName("body")[0];
    let texttable = document.getElementById("texttable")

    html.style.width = thisupdate + "px";
    body.style.width = thisupdate + "px";
    texttable.style.width = thisupdate + "px";

    window.scrollX = 0; 
    window.scrollTo({ left: 0 });
    html.scrollLeft = 0; 
    body.scrollTo({ left: 0 });
    texttable.scrollLeft = 0; 

    console.log("why wont you scroll? too much white space!") // WHY??
  } 
}
html {
  overflow: scroll;
  overflow-x: scroll;
  /*overflow-x: hidden;  prefer hidden, but trying to make scroll work*/
}

body{
  overflow:scroll;
}

table {
  border-collapse: collapse;
  border: 0;
  padding: 0;
}

.texttable {
  vertical-align: top;
  border: 0px;
  background-color: #DBD3BF !important;
  overflow:scroll; 
}

p {
  font-family: BradfordLL, serif;
  color: #4c4c4c;
  font-size: 19px;
  line-height: 26.5px;
  font-weight: normal;
  font-style: normal;
  margin: 0;
  margin-bottom: 18px;
}

.footnote {
  font-size: 18px;
  font-weight: normal;
  font-style: normal;
  color: #990000;
  text-align: justify;
  padding-left: 20px;
}

.desci {
  font-family: GothamNarrowBookItalic, times new roman;
  font-size: 20px;
  line-height: 27px;
  font-style: italic;
  text-align: left;
  font-weight: normal;
  color: #4c4c4c;
  margin-top: 8px;
  margin-bottom: 17px;
}

a {
  font-size: 12px !important;
  color: sienna;
  display: none;
}
<!DOCTYPE html>
<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
</head>


<body onload="init()">


<div id="texttable" class="texttable">

  <p>Genesis Chapter 1</p><p class="desci">
    God createth Heaven and Earth, and all things therein, in six days.
  </p><p>
    <a>1</a>  In the beginning God created heaven, and earth.<a>2</a>  And the earth was void and empty, and darkness was upon the face of the
    deep; and the spirit of God moved over the waters.<a>3</a>  And God said: Be light made. And light was made.<a>4</a>  And God saw the light that it was good; and he divided the light from the
    darkness.<a>5</a>  And he called the light Day, and the darkness Night; and there was evening
    and morning one day.<a>6</a>  And God said: Let there be a firmament made amidst the waters: and let it
    divide the waters from the waters.
  </p><p></p><p class="footnote">
    A firmament... By this name is here understood the whole space between the
    earth, and the highest stars. The lower part of which divideth the waters that
    are upon the earth, from those that are above in the clouds.
  </p><p>
    <a>7</a>  And God made a firmament, and divided the waters that were under the
    firmament, from those that were above the firmament, and it was so.<a>8</a>  And God called the firmament, Heaven; and the evening and morning were the
    second day.<a>9</a>  God also said; Let the waters that are under the heaven, be gathered
    together into one place: and let the dry land appear. And it was so done.<a>10</a>  And God called the dry land, Earth; and the gathering together of the
    waters, he called Seas. And God saw that it was good.<a>11</a>  And he said: let the earth bring forth green herb, and such as may seed,
    and the fruit tree yielding fruit after its kind, which may have seed in itself
    upon the earth. And it was so done.<a>12</a>  And the earth brought forth the green herb, and such as yieldeth seed
    according to its kind, and the tree that beareth fruit, having seed each one
    according to its kind. And God saw that it was good.
  </p><p>
    <a>13</a>  And the evening and the morning were the third day.<a>14</a>  And God said: Let there be lights made in the firmament of heaven, to
    divide the day and the night, and let them be for signs, and for seasons, and
    for days and years:<a>15</a>  To shine in the firmament of heaven, and to give light upon the earth,
    and it was so done.<a>16</a>  And God made two great lights: a greater light to rule the day; and a
    lesser light to rule the night: and the stars.
  </p><p class="footnote">
    Two great lights... God created on the first day, light, which being moved
    from east to west, by its rising and setting, made morning and evening. But on
    the fourth day he ordered and distributed this light, and made the sun, moon,
    and stars. The moon, though much less than the stars, is here called a great
    light, from its giving a far greater light to the earth than any of them.
  </p><p>
    <a>17</a>  And he set them in the firmament of heaven to shine upon the earth.<a>18</a>  And to rule the day and the night, and to divide the light and the
    darkness. And God saw that it was good.<a>19</a>  And the evening and morning were the fourth day.<a>20</a>  God also said: let the waters bring forth the creeping creature having
    life, and the fowl that may fly over the earth under the firmament of heaven.<a>21</a>  And God created the great whales, and every living and moving creature,
    which the waters brought forth, according to their kinds, and every winged fowl
    according to its kind. And God saw that it was good.<a>22</a>  And he blessed them, saying: Increase and multiply, and fill the waters
    of the sea: and let the birds be multiplied upon the earth.
  </p><p>
    <a>23</a>  And the evening and morning were the fifth day.<a>24</a>  And God said: Let the earth bring forth the living creature in its kind,
    cattle and creeping things, and beasts of the earth, according to their kinds.
    And it was so done.<a>25</a>  And God made the beasts of the earth according to their kinds, and
    cattle, and every thing that creepeth on the earth after its kind. And God saw
    that it was good.<a>26</a>  And he said: Let us make man to our image and likeness: and let him have
    dominion over the fishes of the sea, and the fowls of the air, and the beasts,
    and the whole earth, and every creeping creature that moveth upon the earth.
  </p><p class="footnote">
    Let us make man to our image... This image of God in man, is not in the body,
    but in the soul; which is a spiritual substance, endued with understanding and
    free will. God speaketh here in the plural number, to insinuate the plurality
    of persons in the Deity.
  </p><p>
    <a>27</a>  And God created man to his own image: to the image of God he created him:
    male and female he created them.<a>28</a>  And God blessed them, saying: Increase and multiply, and fill the earth,
    and subdue it, and rule over the fishes of the sea, and the fowls of the air,
    and all living creatures that move upon the earth.
  </p><p class="footnote">
    Increase and multiply... This is not a precept, as some Protestant
    controvertists would have it, but a blessing, rendering them fruitful; for God
    had said the same words to the fishes, and birds, (ver. 22) who were incapable
    of receiving a precept.
  </p><p>
    <a>29</a>  And God said: Behold I have given you every herb bearing seed upon the
    earth, and all trees that have in themselves seed of their own kind, to be your
    meat:<a>30</a>  And to all beasts of the earth, and to every fowl of the air, and to all
    that move upon the earth, and wherein there is life, that they may have to feed
    upon. And it was so done.<a>31</a>  And God saw all the things that he had made, and they were very good. And
    the evening and morning were the sixth day.
  </p><div id="nextid" val="01002"></div>
</div>


</body>
</html>

标签： javascript

解决方案

推荐阅读