我有一个页面,其中包含其中包含div的表行的滚动条是从数据库动态生成的.每个表格行都像一个链接,有点像你在视频播放器旁边的YouTube播放列表中看到的那样.
当用户访问该页面时,他们所在的选项应该转到滚动div的顶部.此功能正常运行.问题是,它太过分了.就像他们选择的选项大约10px太高.因此,访问该页面,该URL用于标识选择了哪个选项,然后将该选项滚动到滚动div的顶部.注意:这不是窗口的滚动条,它是带滚动条的div.
我使用此代码使其将选定的选项移动到div的顶部:
var pathArray = window.location.pathname.split( '/' );
var el = document.getElementById(pathArray[5]);
el.scrollIntoView(true);
它将它移动到div的顶部,但是大约10个像素太远了.有谁知道如何解决这个问题？
例如,这些之间的区别是:
<iframe srcdoc="<p>Some HTML</p>"></iframe>
<iframe src="data:text/html,<p>Some HTML</p>"></iframe>
而且,如果它们完全相同,为什么HTML5会添加srcdoc属性？
编辑
也许我不够清楚.我不是比较src有srcdoc,但src使用text/html的数据URI用srcdoc.
然后,如果功能图是这样的
| src attribute | srcdoc attribute
--------------------------------------------------------------------
URL | Yes | No without using src (*)
HTML content | Yes, using data URI | Yes
为什么srcdoc需要？
(*)注意:
它似乎srcdoc可以用来通过URL(Demo)加载页面,使用带有src属性的子图:
<iframe srcdoc="<iframe src='http://microsoft.com'></iframe>"></iframe>
我添加了以下代码以便用鼠标滚动(滚动点击+拖动,而不是通过鼠标滚轮).到目前为止,这么好 - 像魅力一样:
var clicked = false, clickY;
$(document).on({
'mousemove': function(e) {
clicked && updateScrollPos(e);
},
'mousedown': function(e) {
clicked = true;
clickY = e.pageY;
},
'mouseup': function() {
clicked = false;
$('html').css('cursor', 'auto');
}
});
var updateScrollPos = function(e) {
$('html').css('cursor', 'row-resize');
$(window).scrollTop($(window).scrollTop() + (clickY - e.pageY));
}
我试图更改此滚动行为,以便每个方向单击+拖动鼠标移动跳转到下一个/最近的哈希后,例如10px拖动.换句话说,鼠标向上滚动应跳转到当前位置上方的下一个哈希值,向下滚动应跳转到下面的下一个哈希值.
任何相关问题似乎都没有涵盖这一点.
编辑:
我想我需要更换
$(window).scrollTop($(window).scrollTop() + (clickY - e.pageY));
通过以下链接中的部分解决方案.不幸的是,这似乎高于我的技能水平:
解:
我用赛义德Ataee的回答,真的很高兴关于代码,但换成下面一个我在的地方就已经在鼠标滚轮代码部分,刚好更好的工作,在我结束(我相信他是好的,只是给人一种另类这里):
$('#nav').onePageNav();
var $current, flag = false;
$('body').mousewheel(function(event, delta) {
if (flag) { return false; }
$current = $('div.current'); …在 Javascript 中，有没有什么方法可以在刷新页面后保持当前的滚动位置？
刷新后通常显示页面顶部..我不想要它..
我想在URL（myapp.com＃somevalue）中传递一个值作为哈希值，并在页面加载时让页面滚动到该项目-这正是自互联网开始以来使用哈希片段的行为。我尝试使用scrollIntoView，但在iOS上失败。然后，我尝试仅取消设置/设置window.location.hash，但似乎存在竞争条件。仅当延迟超过600ms时才有效。
我想要一个更可靠的解决方案，不想引入不必要的延迟。当延迟太短时，它似乎滚动到所需的项目，然后滚动到页面顶部。您不会在此演示中看到效果，但是会在我的实际应用中发生https://codesandbox.io/s/pjok544nrx第75行
componentDidMount() {
let self = this;
let updateSearchControl = hash => {
let selectedOption = self.state.searchOptions.filter(
option => option.value === hash
)[0];
if (selectedOption) {
// this doesn't work with Safari on iOS
// document.getElementById(hash).scrollIntoView(true);
// this works if delay is 900 but not 500 ms
setTimeout(() => {
// unset and set the hash to trigger scrolling to target
window.location.hash = null;
window.location.hash = hash;
// scroll back by the height of the Search box …单击我的菜单中的关于或联系人后如何滚动到div(例如:#about,#contact)？
<div class="masthead">
<ul class="nav nav-pills pull-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<h3 class="muted">Name site</h3>
</div>
我想滚动到渲染模板上的特定div.我知道我可以添加一个锚点#something,但我正在渲染模板,我无法更改网址.我怎样才能做到这一点？
<div id="something">...</div>
def search():
...
return render_template('search.html') # should scroll to #something