Question

我试图（有点）使用JavaScript模拟平滑滚动。我非常接近我想要的，但我的逻辑目前使窗口滚动到它应该滚动到的部分，最后跳回到它。我认为它与我使用的setTimeout有关，但我无法弄明白。

＆＃13;

var linkToAnchor = document.querySelector('a[href="#section-2"]');
var anchor = document.querySelector('#section-2')
linkToAnchor.onclick = function() {
  var i = 0;
  var distance = anchor.offsetTop - document.body.scrollTop;
  console.log("distance to be scrolled: ", distance);
  var pixelJump = 25;
  (function loop() {
    console.log("i: ", i);
    //debugger;
    console.log("current scrollTop: ", document.body.scrollTop)
    if (i + pixelJump > distance) {
      document.body.scrollTop = anchor.offsetTop;
      console.log('its over')
      return;
    }
    if (i > distance) return;
    i += pixelJump;
    scrollBy(0, pixelJump);
    console.log("new scrollTop: ", document.body.scrollTop)
    setTimeout(loop, 50);
  })();
}

＆＃13;

[class*="section-"] {
  width: 500px;
  height: 300px;
  background-color: red;
}

.section-2 {
  background-color: orange;
}

＆＃13;

<div class="section-1">
  SECTION 1
  <a href="#section-2">link to section 2</a>
</div>
<div id="section-2" class="section-2">
  SECTION 2
</div>
<div class="section-3">
  SECTION 3
</div>

＆＃13;

这是脚本调试输出的一部分：

distance:  308
i:  0
current scrollTop:  0
new height:  25
i:  25
current scrollTop:  308 ##### WHY DOES THE SCROLLTOP JUMP TO 308 FROM 0?? ####
new height:  333
i:  50
current scrollTop:  333
new height:  358
i:  75
current scrollTop:  358
new height:  383

Answer 1

使用import android.content.Context; import android.os.AsyncTask; import java.io.File; import java.util.Properties; import android.os.Environment; import javax.activation.DataHandler; import javax.activation.DataSource; import javax.activation.FileDataSource; import javax.mail.Address; import javax.mail.Authenticator; import javax.mail.BodyPart; import javax.mail.Message; import javax.mail.PasswordAuthentication; import javax.mail.Session; import javax.mail.Transport; import javax.mail.internet.InternetAddress; import javax.mail.internet.MimeBodyPart; import javax.mail.internet.MimeMessage; import javax.mail.internet.MimeMultipart; public class EmailHandler extends AsyncTask<Void, Void, Boolean> { private static String to = "receiver@gmail.com"; private static String from = "senderp@gmail.com"; private static String subject = "Subject"; private static String sender = "Sender"; private static String mail; private static String username = "sender"; private static String password = "pasword"; @Override protected Boolean doInBackground(Void... nothing) { try { Authenticator auth = new EmailAutherticator(); Properties properties = new Properties(); properties.setProperty("mail.smtp.auth", "true"); properties.setProperty("mail.smtp.starttls.enable", "true"); properties.setProperty("mail.smtp.host", "smtp.gmail.com"); properties.setProperty("mail.smtp.port", "587"); properties.setProperty("mail.smtp.user", username); properties.setProperty("mail.smtp.password", password); Session session = Session.getDefaultInstance(properties,auth); MimeMessage message = new MimeMessage(session); Address address = new InternetAddress(from,sender); message.setFrom(address); message.setRecipients(Message.RecipientType.TO, InternetAddress.parse(to)); message.setSubject(subject); message.setText("JPG Image Test"); MimeMultipart multipart = new MimeMultipart(); MimeBodyPart messageBodyPart = new MimeBodyPart(); String pic = Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES)+ File.separator+"picture0"+".jpg"; DataSource source = new FileDataSource(pic); messageBodyPart.setDataHandler(new DataHandler(source0)); messageBodyPart.setHeader("Content-ID","<image>"); messageBodyPart.setFileName("Theft back"); multipart.addBodyPart(messageBodyPart); message.setContent(multipart); Transport.send(message); return true; } catch(Exception exp) { exp.printStackTrace(); return false; } } } class EmailAutherticator extends Authenticator { private String username = "sender"; private String password = "password"; public EmailAutherticator() { super(); } public EmailAutherticator(String user,String pwd){ super(); username = user; password = pwd; } public PasswordAuthentication getPasswordAuthentication(){ return new PasswordAuthentication(username,password); } }阻止浏览器自行滚动到锚点。将哈希值保留在href中。对于非js用户来说，这是一个优雅的后备。

preventDefault

使用JavaScript的setTimeout（稍微）模拟平滑滚动

1 个答案: