堆栈内存溢出
  简体   繁体   English

使用说Javascript以编程方式滚动Div

[英]Scrolling a Div programatically using say Javascript

 原文  2010-05-20 15:25:48  7   2    javascript/ asp.net/ .net/ html/ jqgrid

问题描述

Hi I have a jqgrid which is embedded in a Div. 嗨，我有一个嵌入在Div中的jqgrid。 I am deleting records from the grid and reloading the grid using grid.Trigger('reload'). 我正在从网格中删除记录，并使用grid.Trigger（'reload'）重新加载网格。 The width of the grid is considerably high so it has a scroll bar. 网格的宽度很大，因此具有滚动条。 Now I scrolled through the end of the grid horizontally before deleting records. 现在，在删除记录之前，我水平滚动了网格的末尾。 Each time I delete the records and reload the grid, the column headers and their values are slightly misaligned. 每次删除记录并重新加载网格时，列标题及其值都会稍微对齐。 When I move the scroll bar back to original position or just move the scroll bar slightly they are aligned properly. 当我将滚动条移回原始位置或只是稍微移动滚动条时，它们将正确对齐。

So I thought its better to move the scroll bar to its inital position when the grid reloads. 因此，我认为在重新加载网格时将滚动条移动到其初始位置更好。 How can a scroll bar be programatically moved using javascript. 如何使用JavaScript以编程方式移动滚动条。 Or is there any other way to solve my problem? 还是有其他方法可以解决我的问题？

2 个解决方案

解决方案1
 0  2010-05-20 15:46:41

From daniweb (untested): 来自daniweb （未经试用 ）： 

document.getElementById('id1').scrollTop = document.getElementById('id2').offsetTop;

Where id1 is the div; 其中id1是div； and id2 is the element to scroll to within the div. id2是在div中滚动到的元素。

解决方案2
 0  2010-05-20 17:00:31

It seems to me that you have mostly a problem with wrong calculation of the width by jqGrid and not a problem with the horizontal scrolling. 在我看来，jqGrid对宽度的错误计算主要是您遇到的问题，而水平滚动没有问题。 Look at scripts which I posted in Correctly calling setGridWidth on a jqGrid inside a jQueryUI Dialog . 查看我在jQueryUI对话框内的jqGrid上正确调用setGridWidth上发布的脚本。 They are not perfect, but can fix calculation of the width of grid in the most situations. 它们不是完美的，但是可以在大多数情况下修正网格宽度的计算。 Moreover I recommend you to verify whether you change (probably indirect) default padding properties of <td> elements. 此外，我建议您验证是否更改（可能是间接的） <td>元素的默认填充属性。 If if is so it can be required to adjust cellLayout option of jqGrid (see http://www.trirand.com/blog/?page_id=393/feature-request/celllayout/&value=cellLayout&type=1&include=1&search=1&ret=all ). 如果是这样，则可能需要调整cellLayout选项（请参阅http://www.trirand.com/blog/?page_id=393/feature-request/celllayout/&value=cellLayout&type=1&include=1&search=1&ret=all ）。

UPDATED : One more tip: try to use the latest uncompressed version of jqGrid which you can downloaded from http://github.com/tonytomov/jqGrid . UPDATED ：另一个提示：尝试使用最新的jqGrid的未压缩版本，可以从http://github.com/tonytomov/jqGrid下载。 It has small fix in setGridWidth (see http://www.trirand.com/blog/?page_id=393/bugs/some-bugfixes-for-3-6-5/ ). 它对setGridWidth修正setGridWidth （请参阅http://www.trirand.com/blog/?page_id=393/bugs/some-bugfixes-for-3-6-5/ ）。

使用javascript显示/隐藏<div>滚动时</div><div id="text_translate"><p>我想制作一个采用性的粘性导航栏。 我以前从未用 Javascript 编写过自己的代码。</p><p> 我的解决方案是制作两个基于滚动显示/隐藏的粘性导航栏。 我的解决方案是这样的：</p><ul><li> 首先，在完成任何滚动之前，我的第一个导航栏（黄色）将可见并位于距顶部 100px 的位置，即top:100px 。</li><li> 然后，当启动滚动时，我希望这个黄色&lt;div&gt;使用display:none消失。</li><li> 同样在滚动时，在黄色导航栏消失的同时，我会显示带有top:200px的橙色导航栏。</li><li> 现在，橙色条从一开始就（错误地）显示，但它不应该......在任何给定时间只应显示一个条。 我希望栏，即两个&lt;div&gt;元素，在多次上下滚动时也能保持出现/消失。</li></ul><p> 我的 javascript 有问题，codepen 抱怨$未定义。</p><p> <a href="https://codepen.io/G1111/pen/RwBPrPR" rel="nofollow noreferrer">https://codepen.io/G1111/pen/RwBPrPR</a> </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-js lang-js prettyprint-override"> $(window).scroll(function() { Testvariable = $(window).scrollTop(); if (Testvariable == 0) { document.getElementById("stickys").style.display = "normal"; document.getElementById("stickys2").style.display = "none"; } else { document.getElementById("stickys").style.display = "none"; document.getElementById("stickys2").style.display = "normal"; } });</pre><pre class="snippet-code-css lang-css prettyprint-override"> #stickys { top: 100px;important: background-color; yellow: height; 100px: position; fixed: position; fixed:important; box-sizing: border-box; margin: 0 0% 0 0%;important: padding; 0:important; width: calc(60vw - 0%); left: calc(20vw - 0%); right: calc(20vw - 0%); width: calc(100vw - 0%); left: 0px; right: 0px; opacity: 1; } #stickys2 { top: 200px;important: background-color; orange: height; 100px: position; fixed: position; fixed:important; box-sizing: border-box; margin: 0 0% 0 0%;important: padding; 0:important; width: calc(60vw - 0%); left: calc(20vw - 0%); right: calc(20vw - 0%); width: calc(100vw - 0%); left: 0px; right: 0px; opacity: 1; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt; &lt;div id="stickys"&gt; My first sticky navigation bar. Show initially, then hide when slighest scroll, that is when Testvariable&gt;0. Here, top:100px &lt;/div&gt; &lt;div id="stickys2"&gt; My second sticky navigation bar. Hide initially, then show when slighest scroll, that is when Testvariable&gt;0. Here, top: 200px. &lt;/div&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;</pre></div></div><p></p></div> - Using javascript to show/hide <div> when scrolling

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在MVC3中使用Javascript垂直滚动div - Scrolling a div vertically using Javascript in MVC3 使用javascript显示/隐藏<div>滚动时</div><div id="text_translate"><p>我想制作一个采用性的粘性导航栏。 我以前从未用 Javascript 编写过自己的代码。</p><p> 我的解决方案是制作两个基于滚动显示/隐藏的粘性导航栏。 我的解决方案是这样的：</p><ul><li> 首先，在完成任何滚动之前，我的第一个导航栏（黄色）将可见并位于距顶部 100px 的位置，即top:100px 。</li><li> 然后，当启动滚动时，我希望这个黄色&lt;div&gt;使用display:none消失。</li><li> 同样在滚动时，在黄色导航栏消失的同时，我会显示带有top:200px的橙色导航栏。</li><li> 现在，橙色条从一开始就（错误地）显示，但它不应该......在任何给定时间只应显示一个条。 我希望栏，即两个&lt;div&gt;元素，在多次上下滚动时也能保持出现/消失。</li></ul><p> 我的 javascript 有问题，codepen 抱怨$未定义。</p><p> <a href="https://codepen.io/G1111/pen/RwBPrPR" rel="nofollow noreferrer">https://codepen.io/G1111/pen/RwBPrPR</a> </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-js lang-js prettyprint-override"> $(window).scroll(function() { Testvariable = $(window).scrollTop(); if (Testvariable == 0) { document.getElementById("stickys").style.display = "normal"; document.getElementById("stickys2").style.display = "none"; } else { document.getElementById("stickys").style.display = "none"; document.getElementById("stickys2").style.display = "normal"; } });</pre><pre class="snippet-code-css lang-css prettyprint-override"> #stickys { top: 100px;important: background-color; yellow: height; 100px: position; fixed: position; fixed:important; box-sizing: border-box; margin: 0 0% 0 0%;important: padding; 0:important; width: calc(60vw - 0%); left: calc(20vw - 0%); right: calc(20vw - 0%); width: calc(100vw - 0%); left: 0px; right: 0px; opacity: 1; } #stickys2 { top: 200px;important: background-color; orange: height; 100px: position; fixed: position; fixed:important; box-sizing: border-box; margin: 0 0% 0 0%;important: padding; 0:important; width: calc(60vw - 0%); left: calc(20vw - 0%); right: calc(20vw - 0%); width: calc(100vw - 0%); left: 0px; right: 0px; opacity: 1; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt; &lt;div id="stickys"&gt; My first sticky navigation bar. Show initially, then hide when slighest scroll, that is when Testvariable&gt;0. Here, top:100px &lt;/div&gt; &lt;div id="stickys2"&gt; My second sticky navigation bar. Hide initially, then show when slighest scroll, that is when Testvariable&gt;0. Here, top: 200px. &lt;/div&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;</pre></div></div><p></p></div> - Using javascript to show/hide <div> when scrolling 使用 Javascript 和 React 检测 DIV 中的滚动位置 - Detect Scrolling Position in a DIV using Javascript and React 使用香草 JavaScript 滚动时显示 div - Show div when scrolling using vanilla JavaScript 滚动到以编程方式加载的DIV中的锚点（从iframe中） - Scrolling to an anchor in a programatically loaded DIV (from an iframe) 如何使用javascript检查任何div是否具有具有特定类的内部div表示“ xyz”？ - How to check if any div has inner div having specific class say 'xyz' using javascript? 使用JavaScript滚动div - Scrolling through div with JavaScript Javascript 滚动 Div 循环 - Javascript scrolling Div loop 通过javascript的div的水平滚动 - Horizontal Scrolling of a div by javascript 新滚动条-使用javascript替换div后不滚动 - New Scroller - not scrolling after replacing div using javascript
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM