我有几个关于 Element.scrollIntoView 的实验性 scrollIntoViewOptions 的问题 function .我知道它是实验性的,但我使用的是 Chrome 65,所以我想我也可以使用它。
behavior 设置为 auto 是什么意思。在我的机器上,auto 似乎与 instantbehavior 设置为 smooth 并想要滚动到表格中的某个内容时,它只能非常缓慢地滚动到我想要的元素。有没有人对如何加速这种类型的动画有任何一般性的指示(如果可能的话)?我不一定需要你为我做所有事情,我只是不知道从哪里开始。最佳答案
我不确定你的问题是否仍然相关,但由于我正在测试它,我想我可以分享这个 scrollIntoView 的状态从今天开始运作。
问题的答案:
在 Chrome 71 中,当 behavior 设置为 auto 时,浏览器会立即滚动到该元素,但值为 smooth,它滚动到带有漂亮动画的元素。
根据 documentation和 specifications ,无法控制动画的速度:
When a user agent is to perform a smooth scroll of a scrolling box box to position, it must update the scroll position of box in a user-agent-defined fashion over a user-agent-defined amount of time.
流畅行为示例:
var box = document.getElementById("box");
var btn = document.getElementById("btn");
btn.addEventListener("click", function() {
box.scrollIntoView({
behavior: "smooth",
block: "center",
inline: "nearest"
});
});#box {
background: red;
color: yellow;
}<button type="button" id="btn">Scroll to box</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor maximus dui ac molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum scelerisque, augue non interdum egestas, felis eros pharetra ante, quis bibendum nunc odio sed turpis. Proin placerat, arcu vitae ullamcorper hendrerit, magna tortor fringilla justo, at rhoncus libero dolor id tortor. Curabitur quis leo a nisl volutpat sollicitudin sed non velit. Cras est justo, pretium in ex ac, congue tempor mi. Donec est orci, ultrices id ornare at, interdum nec eros. Quisque consectetur, nisl a condimentum efficitur, est nulla accumsan massa, aliquet interdum diam est condimentum nunc. Cras tincidunt purus a nunc porttitor imperdiet. Sed porta nulla at orci sodales, eget posuere nisi auctor. Aenean eu libero varius, condimentum diam sed, suscipit diam. Phasellus venenatis nec ligula non rutrum. Aliquam sit amet dapibus neque. Duis hendrerit malesuada ex eget semper. Quisque malesuada et libero ac mollis.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras a nisi mattis, sollicitudin risus non, pharetra mauris. Morbi eget consectetur neque, eget ornare orci. Cras mi enim, tempor condimentum urna condimentum, maximus semper nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum gravida nisl non sapien facilisis vestibulum. Morbi luctus vestibulum consectetur. Donec rutrum molestie justo, ut posuere lectus. Vivamus facilisis, elit eget faucibus pharetra, orci dui aliquam neque, eget finibus mauris ante eu odio. Cras blandit urna dolor, ut dictum augue dignissim at. In quis mauris sed lacus venenatis hendrerit gravida id purus. Proin tristique augue id arcu finibus, a cursus neque gravida. Fusce volutpat convallis neque, at laoreet tortor placerat dignissim. Quisque hendrerit maximus arcu, quis vestibulum dui.</p>
<p>Nunc lobortis nibh vel porttitor feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean orci ipsum, auctor elementum tellus at, tincidunt sollicitudin ante. Morbi justo massa, rutrum eu nulla quis, egestas bibendum quam. Aenean pretium, tellus ut porttitor convallis, turpis ligula aliquet lacus, sit amet semper dolor quam nec dui. Quisque quis ornare leo, quis tempor nunc. Nam bibendum in lectus eget pharetra. Vivamus gravida consequat lacinia. Maecenas in magna mollis, consectetur ligula ut, viverra enim. Donec sollicitudin nibh in eros gravida venenatis. Curabitur vehicula ipsum in nulla porttitor molestie. Aliquam erat volutpat.</p>
<p>In ullamcorper consequat massa, vitae aliquet metus tempus ac. Mauris maximus, sem et lacinia malesuada, lorem dolor molestie sapien, a molestie dolor magna ac lacus. Ut a nibh in tortor condimentum ornare nec at sem. Maecenas iaculis ac ante sit amet efficitur. Ut gravida efficitur accumsan. Donec non metus ut arcu tincidunt blandit nec et urna. Etiam mauris orci, consequat quis ipsum vel, laoreet laoreet orci. Sed felis tortor, elementum id luctus tincidunt, pretium vitae lectus. Ut tincidunt ullamcorper tortor, nec blandit risus eleifend ut. Suspendisse fringilla metus elementum ligula aliquet fermentum non gravida lectus. Vivamus mattis ullamcorper massa ut tristique. Quisque feugiat tristique dictum. Nunc vitae libero massa. Sed sagittis congue euismod.</p>
<p>In sed massa at est malesuada maximus non vel mi. Fusce tincidunt mauris eget metus fringilla venenatis. Ut dapibus nibh diam, ut efficitur risus molestie eu. Duis et tincidunt nunc, feugiat rhoncus augue. Cras dolor nibh, eleifend et purus sed, fringilla sagittis neque. Nam porta vulputate consequat. Nunc orci quam, rutrum nec dolor et, ultrices pellentesque lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor maximus dui ac molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum scelerisque, augue non interdum egestas, felis eros pharetra ante, quis bibendum nunc odio sed turpis. Proin placerat, arcu vitae ullamcorper hendrerit, magna tortor fringilla justo, at rhoncus libero dolor id tortor. Curabitur quis leo a nisl volutpat sollicitudin sed non velit. Cras est justo, pretium in ex ac, congue tempor mi. Donec est orci, ultrices id ornare at, interdum nec eros. Quisque consectetur, nisl a condimentum efficitur, est nulla accumsan massa, aliquet interdum diam est condimentum nunc. Cras tincidunt purus a nunc porttitor imperdiet. Sed porta nulla at orci sodales, eget posuere nisi auctor. Aenean eu libero varius, condimentum diam sed, suscipit diam. Phasellus venenatis nec ligula non rutrum. Aliquam sit amet dapibus neque. Duis hendrerit malesuada ex eget semper. Quisque malesuada et libero ac mollis.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras a nisi mattis, sollicitudin risus non, pharetra mauris. Morbi eget consectetur neque, eget ornare orci. Cras mi enim, tempor condimentum urna condimentum, maximus semper nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum gravida nisl non sapien facilisis vestibulum. Morbi luctus vestibulum consectetur. Donec rutrum molestie justo, ut posuere lectus. Vivamus facilisis, elit eget faucibus pharetra, orci dui aliquam neque, eget finibus mauris ante eu odio. Cras blandit urna dolor, ut dictum augue dignissim at. In quis mauris sed lacus venenatis hendrerit gravida id purus. Proin tristique augue id arcu finibus, a cursus neque gravida. Fusce volutpat convallis neque, at laoreet tortor placerat dignissim. Quisque hendrerit maximus arcu, quis vestibulum dui.</p>
<p>Nunc lobortis nibh vel porttitor feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean orci ipsum, auctor elementum tellus at, tincidunt sollicitudin ante. Morbi justo massa, rutrum eu nulla quis, egestas bibendum quam. Aenean pretium, tellus ut porttitor convallis, turpis ligula aliquet lacus, sit amet semper dolor quam nec dui. Quisque quis ornare leo, quis tempor nunc. Nam bibendum in lectus eget pharetra. Vivamus gravida consequat lacinia. Maecenas in magna mollis, consectetur ligula ut, viverra enim. Donec sollicitudin nibh in eros gravida venenatis. Curabitur vehicula ipsum in nulla porttitor molestie. Aliquam erat volutpat.</p>
<p>In ullamcorper consequat massa, vitae aliquet metus tempus ac. Mauris maximus, sem et lacinia malesuada, lorem dolor molestie sapien, a molestie dolor magna ac lacus. Ut a nibh in tortor condimentum ornare nec at sem. Maecenas iaculis ac ante sit amet efficitur. Ut gravida efficitur accumsan. Donec non metus ut arcu tincidunt blandit nec et urna. Etiam mauris orci, consequat quis ipsum vel, laoreet laoreet orci. Sed felis tortor, elementum id luctus tincidunt, pretium vitae lectus. Ut tincidunt ullamcorper tortor, nec blandit risus eleifend ut. Suspendisse fringilla metus elementum ligula aliquet fermentum non gravida lectus. Vivamus mattis ullamcorper massa ut tristique. Quisque feugiat tristique dictum. Nunc vitae libero massa. Sed sagittis congue euismod.</p>
<p>In sed massa at est malesuada maximus non vel mi. Fusce tincidunt mauris eget metus fringilla venenatis. Ut dapibus nibh diam, ut efficitur risus molestie eu. Duis et tincidunt nunc, feugiat rhoncus augue. Cras dolor nibh, eleifend et purus sed, fringilla sagittis neque. Nam porta vulputate consequat. Nunc orci quam, rutrum nec dolor et, ultrices pellentesque lorem.</p>
<div id="box">Box</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor maximus dui ac molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum scelerisque, augue non interdum egestas, felis eros pharetra ante, quis bibendum nunc odio sed turpis. Proin placerat, arcu vitae ullamcorper hendrerit, magna tortor fringilla justo, at rhoncus libero dolor id tortor. Curabitur quis leo a nisl volutpat sollicitudin sed non velit. Cras est justo, pretium in ex ac, congue tempor mi. Donec est orci, ultrices id ornare at, interdum nec eros. Quisque consectetur, nisl a condimentum efficitur, est nulla accumsan massa, aliquet interdum diam est condimentum nunc. Cras tincidunt purus a nunc porttitor imperdiet. Sed porta nulla at orci sodales, eget posuere nisi auctor. Aenean eu libero varius, condimentum diam sed, suscipit diam. Phasellus venenatis nec ligula non rutrum. Aliquam sit amet dapibus neque. Duis hendrerit malesuada ex eget semper. Quisque malesuada et libero ac mollis.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras a nisi mattis, sollicitudin risus non, pharetra mauris. Morbi eget consectetur neque, eget ornare orci. Cras mi enim, tempor condimentum urna condimentum, maximus semper nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum gravida nisl non sapien facilisis vestibulum. Morbi luctus vestibulum consectetur. Donec rutrum molestie justo, ut posuere lectus. Vivamus facilisis, elit eget faucibus pharetra, orci dui aliquam neque, eget finibus mauris ante eu odio. Cras blandit urna dolor, ut dictum augue dignissim at. In quis mauris sed lacus venenatis hendrerit gravida id purus. Proin tristique augue id arcu finibus, a cursus neque gravida. Fusce volutpat convallis neque, at laoreet tortor placerat dignissim. Quisque hendrerit maximus arcu, quis vestibulum dui.</p>
<p>Nunc lobortis nibh vel porttitor feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean orci ipsum, auctor elementum tellus at, tincidunt sollicitudin ante. Morbi justo massa, rutrum eu nulla quis, egestas bibendum quam. Aenean pretium, tellus ut porttitor convallis, turpis ligula aliquet lacus, sit amet semper dolor quam nec dui. Quisque quis ornare leo, quis tempor nunc. Nam bibendum in lectus eget pharetra. Vivamus gravida consequat lacinia. Maecenas in magna mollis, consectetur ligula ut, viverra enim. Donec sollicitudin nibh in eros gravida venenatis. Curabitur vehicula ipsum in nulla porttitor molestie. Aliquam erat volutpat.</p>
<p>In ullamcorper consequat massa, vitae aliquet metus tempus ac. Mauris maximus, sem et lacinia malesuada, lorem dolor molestie sapien, a molestie dolor magna ac lacus. Ut a nibh in tortor condimentum ornare nec at sem. Maecenas iaculis ac ante sit amet efficitur. Ut gravida efficitur accumsan. Donec non metus ut arcu tincidunt blandit nec et urna. Etiam mauris orci, consequat quis ipsum vel, laoreet laoreet orci. Sed felis tortor, elementum id luctus tincidunt, pretium vitae lectus. Ut tincidunt ullamcorper tortor, nec blandit risus eleifend ut. Suspendisse fringilla metus elementum ligula aliquet fermentum non gravida lectus. Vivamus mattis ullamcorper massa ut tristique. Quisque feugiat tristique dictum. Nunc vitae libero massa. Sed sagittis congue euismod.</p>
<p>In sed massa at est malesuada maximus non vel mi. Fusce tincidunt mauris eget metus fringilla venenatis. Ut dapibus nibh diam, ut efficitur risus molestie eu. Duis et tincidunt nunc, feugiat rhoncus augue. Cras dolor nibh, eleifend et purus sed, fringilla sagittis neque. Nam porta vulputate consequat. Nunc orci quam, rutrum nec dolor et, ultrices pellentesque lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor maximus dui ac molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum scelerisque, augue non interdum egestas, felis eros pharetra ante, quis bibendum nunc odio sed turpis. Proin placerat, arcu vitae ullamcorper hendrerit, magna tortor fringilla justo, at rhoncus libero dolor id tortor. Curabitur quis leo a nisl volutpat sollicitudin sed non velit. Cras est justo, pretium in ex ac, congue tempor mi. Donec est orci, ultrices id ornare at, interdum nec eros. Quisque consectetur, nisl a condimentum efficitur, est nulla accumsan massa, aliquet interdum diam est condimentum nunc. Cras tincidunt purus a nunc porttitor imperdiet. Sed porta nulla at orci sodales, eget posuere nisi auctor. Aenean eu libero varius, condimentum diam sed, suscipit diam. Phasellus venenatis nec ligula non rutrum. Aliquam sit amet dapibus neque. Duis hendrerit malesuada ex eget semper. Quisque malesuada et libero ac mollis.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras a nisi mattis, sollicitudin risus non, pharetra mauris. Morbi eget consectetur neque, eget ornare orci. Cras mi enim, tempor condimentum urna condimentum, maximus semper nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum gravida nisl non sapien facilisis vestibulum. Morbi luctus vestibulum consectetur. Donec rutrum molestie justo, ut posuere lectus. Vivamus facilisis, elit eget faucibus pharetra, orci dui aliquam neque, eget finibus mauris ante eu odio. Cras blandit urna dolor, ut dictum augue dignissim at. In quis mauris sed lacus venenatis hendrerit gravida id purus. Proin tristique augue id arcu finibus, a cursus neque gravida. Fusce volutpat convallis neque, at laoreet tortor placerat dignissim. Quisque hendrerit maximus arcu, quis vestibulum dui.</p>
<p>Nunc lobortis nibh vel porttitor feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean orci ipsum, auctor elementum tellus at, tincidunt sollicitudin ante. Morbi justo massa, rutrum eu nulla quis, egestas bibendum quam. Aenean pretium, tellus ut porttitor convallis, turpis ligula aliquet lacus, sit amet semper dolor quam nec dui. Quisque quis ornare leo, quis tempor nunc. Nam bibendum in lectus eget pharetra. Vivamus gravida consequat lacinia. Maecenas in magna mollis, consectetur ligula ut, viverra enim. Donec sollicitudin nibh in eros gravida venenatis. Curabitur vehicula ipsum in nulla porttitor molestie. Aliquam erat volutpat.</p>
<p>In ullamcorper consequat massa, vitae aliquet metus tempus ac. Mauris maximus, sem et lacinia malesuada, lorem dolor molestie sapien, a molestie dolor magna ac lacus. Ut a nibh in tortor condimentum ornare nec at sem. Maecenas iaculis ac ante sit amet efficitur. Ut gravida efficitur accumsan. Donec non metus ut arcu tincidunt blandit nec et urna. Etiam mauris orci, consequat quis ipsum vel, laoreet laoreet orci. Sed felis tortor, elementum id luctus tincidunt, pretium vitae lectus. Ut tincidunt ullamcorper tortor, nec blandit risus eleifend ut. Suspendisse fringilla metus elementum ligula aliquet fermentum non gravida lectus. Vivamus mattis ullamcorper massa ut tristique. Quisque feugiat tristique dictum. Nunc vitae libero massa. Sed sagittis congue euismod.</p>
<p>In sed massa at est malesuada maximus non vel mi. Fusce tincidunt mauris eget metus fringilla venenatis. Ut dapibus nibh diam, ut efficitur risus molestie eu. Duis et tincidunt nunc, feugiat rhoncus augue. Cras dolor nibh, eleifend et purus sed, fringilla sagittis neque. Nam porta vulputate consequat. Nunc orci quam, rutrum nec dolor et, ultrices pellentesque lorem.</p>
浏览器支持:
此功能仅在 Chrome 71、Firefox 64 和 Opera 54 之后得到完全支持。其他浏览器仅部分支持:
Supports scrollIntoView with boolean parameter, but not
smoothbehavior option
关于javascript - 有没有办法加快 Element.scrollIntoView 'smooth' 的行为?什么是 'auto' ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49145825/
类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc
我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身,new.html.erb,有代码:当我运行rspec时,它失败了:1)messages/new.html.erbshou
我有一个模型:classItem项目有一个属性“商店”基于存储的值,我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式?如果方法中没有大的if-else语句,这是如何干净利落地完成的? 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.co
我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗?当我运行compasswatch时,它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行?文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们?我自己编译的.sass文件编译成compiled/t
我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%
我主要使用Ruby来执行此操作,但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式,例如使用这个yaml文件,它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i
为什么4.1%2返回0.0999999999999996?但是4.2%2==0.2。 最佳答案 参见此处:WhatEveryProgrammerShouldKnowAboutFloating-PointArithmetic实数是无限的。计算机使用的位数有限(今天是32位、64位)。因此计算机进行的浮点运算不能代表所有的实数。0.1是这些数字之一。请注意,这不是与Ruby相关的问题,而是与所有编程语言相关的问题,因为它来自计算机表示实数的方式。 关于ruby-为什么4.1%2使用Ruby返
我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他,以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时,出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer
在MRIRuby中我可以这样做:deftransferinternal_server=self.init_serverpid=forkdointernal_server.runend#Maketheserverprocessrunindependently.Process.detach(pid)internal_client=self.init_client#Dootherstuffwithconnectingtointernal_server...internal_client.post('somedata')ensure#KillserverProcess.kill('KILL',
我已经从我的命令行中获得了一切,所以我可以运行rubymyfile并且它可以正常工作。但是当我尝试从sublime中运行它时,我得到了undefinedmethod`require_relative'formain:Object有人知道我的sublime设置中缺少什么吗?我正在使用OSX并安装了rvm。 最佳答案 或者,您可以只使用“require”,它应该可以正常工作。我认为“require_relative”仅适用于ruby1.9+ 关于ruby-主要:Objectwhenrun