我有一个很长ListView的用户可以在返回上一个屏幕之前滚动.当用户ListView再次打开它时,我希望列表滚动到之前的相同点.关于如何实现这一点的任何想法?
鉴于此HTML代码段:
<div id="box" style="overflow:auto; width:200px; height:200px; border:1px solid black;">
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>
21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>
</div>
Run Code Online (Sandbox Code Playgroud)
您(通常)会得到一个带有滚动条的黑盒子,其中包含数字1到30,每个滚动条都在一个新行中.
您可以在该框内向上和向下滚动.
我现在需要的是找出盒子在哪个卷轴位置的可能性.我们只说,每行高15像素,然后向下滚动到数字10,我想得到的结果是数字150(15px*10行).
我在哪里可以找到这个号码?
我手上有简单的JavaScript和jQuery.
我正在MVC的一个项目上工作,并喜欢学习它.有一些成长的痛苦,但一旦你弄清楚它并不坏.WebForms世界中一件非常简单的事情就是保持页面上的滚动位置.您所做的只是将MaintainScrollPositionOnPostback属性设置为true.但是,在MVC中,我没有使用回发,所以这对我不起作用.处理这个问题的标准方法是什么?
编辑: Ajax是可以接受的,但我也想知道如何在没有AJAX的情况下完成它.
老实说,我离开了这里的深度.我创建了一个分页系统,您点击它重新加载页面的链接,并在无序列表中显示一定数量的列表项.当您再次单击它时,它将重新加载页面并显示更多项目.想想Twitter如何在您的Feed中显示推文.
问题是当它重新加载它停留在顶部的页面时.我想要的是它跳转到之前页面上的相同位置.
我已经有一个链接设置的选择器很好我只是不知道如何获取当前滚动位置然后将其传递给新页面以便它跳转到.
到目前为止,这是我的代码:
jQuery(document).ready(function(){
$("a[rel=more]").live("click", function(){
//script...
});
});
Run Code Online (Sandbox Code Playgroud)
我从哪里开始?
我在aspx页面中有一个div,溢出设置为auto.div的内容是动态创建的,由一系列链接按钮组成.
<div id="div1" style="overflow: auto; height: 100%;">
.....
</div>
Run Code Online (Sandbox Code Playgroud)
当我在div中按下并单击任何链接按钮时,页面重新加载会丢失div中的滚动位置并将我带到div的顶部.有什么方法可以阻止这种情况吗?
请注意,这是针对页面内的div.Page.MaintainScrollPositionOnPostBack()不起作用.
我的问题:每当我通过其(自定义的)SimpleCursorAdapter更新其内容时,我的ListView会将其滚动位置重置为顶部.我希望ListView在更新时保持其滚动位置.
我开始时每次都使用创建一个新的适配器实例ListView.setAdapter(),但根据这个讨论,我应该更新适配器而不是重置它.我无法找到一种方法来为SimpleCursorAdapter正常工作.
以下是我尝试过的一些事情,省略了方法参数:
- SimpleCursorAdapter.changeCursorAndColumns()使用新光标成功更新适配器但仍然重置滚动位置.
- SimpleCursorAdapter.changeCursor()行为方式相同.
- SimpleCursorAdapter.swapCursor()直到api 11才可用,我正在为api 8开发.
- SimpleCursorAdapter.notifyDataSetChanged()不更新ListView.(也许我还缺少另一个步骤.)
- ListView.invalidate()不更新ListView.
- SimpleCursorAdapter.requery()使ListView为空白,不推荐使用.
- 我对ListView.setSelection()解决方案很熟悉,但我不希望我的ListView在更新时完全移动.这会将其捕捉到列表中的某个位置.
这似乎应该是一个普通而简单的问题.有人处理过吗?
异步回发后将滚动位置重置到页面顶部的最佳方法是什么?
异步回发是从ASP.NET GridView CommandField列启动的,并且在GridView OnRowCommand中调用ASP.NET更新面板Update方法.
我目前的应用程序是ASP.NET 3.5网站.
编辑:我收到了很多人的反馈,我最后在脚本标签中使用了PageRequestManager方法,但我的下一个问题是:
如何将其配置为仅在用户单击GridView控件中的ASP.NET CommandField时执行?我在页面上有其他按钮执行异步回发,我不想滚动到页面顶部.
编辑1:我开发了一个解决方案,我不需要使用PageRequestManager.请参阅我的后续答案以获得解决方案
我在Firefox控制台中出现以下错误,并伴有抖动动画:
此网站似乎使用滚动链接定位效果.这可能不适用于异步平移;
我检查了Firefox的支持帖子,但我没有看到任何与我的场景相关的示例.
我有一个基于锚点的导航菜单,指示访问者当前在页面上的位置.这是我用来处理这个的jQuery:
$(window).scroll(function(){
var scrollpos = $(this).scrollTop();
var pad = $('.panel_header').outerHeight();
$('.form_group').not('.sub_group').each(function(i){
if(scrollpos + $(window).height() == $(document).height()){
$('ul.tabs li').removeClass('active_tab');
$('ul.tabs li:last-child').addClass('active_tab');
return false;
} else if(scrollpos+pad < $(this).position().top+($(this).height()/2)){
var id = $(this).attr('id').replace('-table','-tab');
var tab = $('#'+id);
if(tab.length > 0){
$('ul.tabs li').removeClass('active_tab');
tab.addClass('active_tab');
}
return false;
}
});
});
Run Code Online (Sandbox Code Playgroud)
基本上,我正在检查锚点位置的滚动位置,如果锚点在附近,则切换CSS类.CSS处理过渡效果.
有没有另一种方法来实现这一点,不需要滚动链接定位效果,导致抖动滚动?
我想SliverAppBar在ScrollablePositionedList.builder滚动时隐藏。这是我在此处包含的相关代码段。
NestedScrollView(
headerSliverBuilder: (context, innerBoxIsScrolled) => [
SliverAppBar(
backgroundColor: Colors.blue,
expandedHeight: 112,
snap: true,
pinned: false,
floating: true,
forceElevated: true,
actions: <Widget>[
IconButton(
icon: Icon(Icons.event),
)
],
flexibleSpace: SafeArea(
child: Column(
children: <Widget>[
Container(
height: kToolbarHeight,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Title',
style: Theme.of(context)
.textTheme
.title
.copyWith(
fontSize: 16, color: Colors.white),
),
SizedBox(
height: 2,
),
Text(
'Date',
style: Theme.of(context)
.textTheme
.caption
.copyWith(
fontSize: 10, color: Colors.white),
), …Run Code Online (Sandbox Code Playgroud) scroll-position nestedscrollview flutter flutter-layout sliverappbar
我目前正在使用 Next.js 样板制作一个网站。
我的路由代码是这样的。(以下)
import Link from 'next/link'
<Link href={{ pathname: '/some-url', query: { param: something } }}>
<div>
<button type="button" onClick={handleClickMore}><span>+ More</span></button>
</div>
</Link>
Run Code Online (Sandbox Code Playgroud)
当我点击它时,我<Button>不想移动滚动位置。但如您所知,当路由新页面时,它会移动到顶部。有没有人知道在加载新分页时保持滚动位置。
我已经为这个问题做了一些搜索,我空手而归.我希望有人可以为我澄清一些事情并指出我正确的方向.
问题:我有一个页面,在提交搜索表单后显示结果列表.当用户单击其中一个结果时,浏览器将转到显示有关结果的更多信息的新页面.当用户然后单击"后退"按钮以打包到结果时,我的浏览器会重新加载页面并显示页面顶部而不是上次单击的结果.
目标:我想要的是:当用户点击后退按钮时,浏览器应返回上一页,而不是显示页面顶部,显示上一个位置的页面.
解决方案:我完全迷失了,因为如何实现这一结果.它可能与javascript或发送到浏览器的标题有关,可能与缓存有关.
当其中一个tabView滚动到顶部时(显示sliverAppBar),tabView的滚动位置无法正确还原。另一个tabView也将滚动到顶部(失去其先前的滚动位置)。
使用可折叠的应用程序栏(sliverAppBar)时如何保留tabView的滚动位置?
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new DefaultTabController(
length: 2,
child: Scaffold(
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
title: Text('Example'),
pinned: true,
floating: true,
forceElevated: innerBoxIsScrolled,
bottom: …Run Code Online (Sandbox Code Playgroud) scroll-position nestedscrollview flutter flutter-sliver flutter-layout
我想要 JavaScript 中文档元素的滚动位置,因为我无法使用 jQuery。
问题:获取文档垂直滚动位置的 JavaScript 代码是什么?我需要使其兼容 IE 8 和所有现代浏览器。
更新 1:我查看了与此重复的 2 个答案。第一个确实解决了我的问题,尽管它不关注跨浏览器解决方案,但第二个远远超出了我的需要。我需要文档的垂直滚动位置,而不是滚动到文档顶部。第二篇文章讨论了使用链接或逐步转到文档顶部,这没有解决我的问题。
更新 2:根据 minitech 提供的答案,我提出了以下函数来确定适用于所有现代浏览器以及 IE 8 之前的滚动位置。我对此进行了测试,它适用于 Chrome、FireFox、Opera、Edge 、IE 8、IE 9、IE 10 和 IE 11。
function getScrollY() {
return window.scrollY || window.pageYOffset || document.body.scrollTop;
}
function getScrollX() {
return window.scrollX || window.pageXOffset || document.body.scrollLeft;
}
Run Code Online (Sandbox Code Playgroud) scroll-position ×13
html ×3
javascript ×3
scroll ×3
android ×2
asp.net ×2
css ×2
flutter ×2
jquery ×2
asp.net-ajax ×1
asp.net-mvc ×1
browser ×1
c# ×1
firefox ×1
gridview ×1
header ×1
listview ×1
next.js ×1
postback ×1
sliverappbar ×1