DIV随滚动条滚动而滚动的实现代码【推荐】

2025-08-14 11:47:03

记得以前写这样的代码比较麻烦，现在有了JQuery简单多了，就几行代码搞定！

<script type="text/javascript" src="Js/jquery-1.7.2.min.js"></script>
  <script type="text/javascript">
    $(function() {
      $(window).scroll(function() {
        var top = $(window).scrollTop()+200;
        var left= $(window).scrollLeft()+320;
        $("#editInfo").css({ left:left + "px", top: top + "px" });
      });
    });
  </script> 

  <div id="editInfo" style="float:left;width:300px;background-color:#ccc;position:absolute;top:200px;">
    <div>用户名：<input type="text" /></div>
    <div>密码：<input type="text" /></div>
    <div>年龄：<input type="text" /></div>
    <div>备注：<input type="text" /></div>
    <div><input type="button" value="保存" /></div>
  </div>

以上这篇DIV随滚动条滚动而滚动的实现代码【推荐】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

jQuery实现将div中滚动条滚动到指定位置的方法

本文实例讲述了jQuery实现将div中滚动条滚动到指定位置的方法.分享给大家供大家参考,具体如下: 一.Js代码: onload = function () { //初始化 scrollToLocation(); }; function scrollToLocation() { var mainContainer = $('#thisMainPanel'), scrollToContainer = mainContainer.find('.son-panel:last');//滚动到<div
让DIV的滚动条自动滚动到最底部的3种方法(推荐)

要制作一个在线聊天的程序,在做最后的修饰时,需要对获得的信息即时滚动以保证用户总能看到最新消息. 聊天程序是基于AJAX设计的,没有用框架,消息容器是一个DIV,所以问题就在于如何控制DIV的滚动条. 但同样的代码拿到我这里却完全失效,又仔细查了下资料说XHTML标准下scrollTop的值恒为0,解决办法是使用 document.documentElement.scrollTop代替document.body.scrollTop,讲了半天所解决的是整个页面的滚动条.这个方法我是用不了了,因为
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位

这里有一个方法可以将DIV的滚动条滚动到其子元素所在的位置,方便自动定位. 复制代码代码如下: var container = $('div'), scrollTo = $('#row_8'); container.scrollTop( scrollTo.offset().top - container.offset().top + container.scrollTop() ); // Or you can animate the scrolling: container.animate({
DIV随滚动条滚动而滚动的实现代码【推荐】

记得以前写这样的代码比较麻烦,现在有了JQuery简单多了,就几行代码搞定! <script type="text/javascript" src="Js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function() { $(window).scroll(function() { var top = $(window).s
实现div内部滚动条滚动到底部和顶部的代码

实例如下所示: <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .scrolldiv{ width: 500px; height: 400px; margin: 10px auto; background: #f00; overflow-y: scroll; padding: 10px; } </style> &
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox

div+css+javascript 实现无缝滚动,marquee无缝滚动,无缝滚动,兼容firefox 用marquee实现首尾相连循环滚动效果(仅IE): 复制代码代码如下: <marquee behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount=&quo
分别用marquee和div+js实现首尾相连循环滚动效果，仅3行代码

复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <TITLE>分别用marquee
原生JS控制多个滚动条同步跟随滚动效果

在一些支持用 markdown 写文章的网站,后台写作页面,一般都是支持 markdown 即时预览的,也就是将整个页面分成两部分,左半部分是你输入的 markdown 文字,右半部分则即时输出对应的预览页面,例如下面就是 CSDN 后台写作页面的 markdown 即时预览效果: 本文不是阐述如何从 0 实现这种效果的(后续很可能会单出文章,),抛开其他,单看页面主体中左右两个容器元素,即 markdown 输入框元素和预览显示框元素本文要探讨的是,当这两个容器元素的内容都超出了容器高度
vue.js-div滚动条隐藏但有滚动效果的实现方法

组件被包在一个高度固定的div mounted () { var boDiv = document.getElementById(this.id); if(boDiv == undefined){ return; } var isFirefox=navigator.userAgent.indexOf("Firefox") if(isFirefox>0){ boDiv.addEventListener('DOMMouseScroll', function(event) { //火狐
js+div实现文字滚动和图片切换效果代码

本文实例讲述了js+div实现文字滚动和图片切换效果代码.分享给大家供大家参考.具体如下: 这里演示js+div文字滚动和图片切换代码,为了演示方便,去掉了图片调用,用数字代替了,用时候再加上就可以了,本效果实现了两种效果,Div切换,TAB切换,和文字滚动,鼠标移上后文字停止滚动,两种功能可任意剥离出来,这不影响代码使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-txt-pic-scroll-cha-style-codes

DIV随滚动条滚动而滚动的实现代码【推荐】

相关推荐

随机推荐