blocks|key|669067|text|jQuery+scrollTo和localScroll插件非常适合这一点。看看这里：http://flesler.blogspot.co.uk/2007/10/jquerylocalscroll-10.html中的选项，这里有一个演示：http://demos.flesler.com/jquery/scrollTo/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|669068|这些插件允许你对动画进行排队，并定义同时水平和垂直滚动的设置，或者垂直滚动，然后水平滚动等。|669069|尼尔|669070|entityMap|0|LINK|mutability|MUTABLE|url|http://flesler.blogspot.co.uk/2007/10/jquerylocalscroll-10.html|1|http://demos.flesler.com/jquery/scrollTo/^0|16|1R|0|3A|15|1|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]|$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]]]

The jQuery scrollTo and localScroll plugins are perfectly suited to this. Take a look here: <a href="http://flesler.blogspot.co.uk/2007/10/jquerylocalscroll-10.html" rel="nofollow">http://flesler.blogspot.co.uk/2007/10/jquerylocalscroll-10.html</a> for the options and here for a demo: <a href="http://demos.flesler.com/jquery/scrollTo/" rel="nofollow">http://demos.flesler.com/jquery/scrollTo/</a>

The plugins allow you to queue the animation and define settings for scrolling horizontally and vertically at the same time, or vertically then horizontally, etc.

Neal

blocks|key|2401881|text|你周围的主要元素，div或section，如果你真的有一个，就把它设置得太固定。而不是在浏览器的窗口中滚动，只需重新定位屏幕上的内容，并提供滚动的效果。用户不会知道其中的区别。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2401882|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Your main surrounding element, div or section if you actually have one, set it too fixed. Instead of actually scrolling in the browser's window just reposition what you have on the screen and give the effect of scrolling. User won't know the difference.

blocks|key|2406578|text|查看jQuery的动画功能。也许你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2406579|function+movePage(newTop,+newLeft){
++++$('#pageview').animate({left:newLeft+%2B+"px",+top:+newTop+%2B+"px"});
}|code-block|syntax|javascript|2406580|请更新您的问题，解释您何时想要移动页面，我可以尝试并提供更多帮助。|2406581|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Look into jQuery's animate function. Maybe you could do something like this: 

<pre><code>function movePage(newTop, newLeft){
 $('#pageview').animate({left:newLeft + "px", top: newTop + "px"});
}
</code></pre>

Please update your question with an explanation of when you want to move the page around and I can try and help you some more.

blocks|key|2406629|text|如果你的content+overflows+its+surrounding+rectangle，你仍然可以用JS滚动它--不管CSS是否显示滚动条。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2406630|对于整个窗口，您可以使用window.scrollTo()及其派生工具。|style|CODE|2406631|对于单个DOM元素，这可以通过设置scrollLeft和scrollTop属性来实现。|2406632|使用这两种方法，你都可以构建一个(jQuery)动画，当然已经有一些插件可以实现这一点。例如，我发现了jQuery.ScrollTo，但也许内置方法.scrollLeft()和.scrollTop()就足以满足您的需求。在comments中也类似于|2406633|+$(someSelector).animate({scrollLeft:+someNumber},+'slow');|code-block|syntax|javascript|2406634|都提到过。|2406635|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/Determining_the_dimensions_of_elements|1|https://developer.mozilla.org/en/DOM/window.scrollTo|2|https://developer.mozilla.org/en/DOM/element.scrollLeft|3|https://developer.mozilla.org/en/DOM/element.scrollTop|4|http://flesler.blogspot.de/2007/10/jqueryscrollto.html|5|http://api.jquery.com/scrollLeft/|6|http://api.jquery.com/scrollTop/|7|http://api.jquery.com/scrollLeft/#dsq-comment-77972155^0|4|17|0|0|C|H|C|H|1|0|H|A|S|9|H|A|2|S|9|3|0|22|D|2G|C|1F|F|4|22|D|5|2G|C|6|33|8|7|0|0|0^^$0|@$1|2|3|4|5|6|7|1E|8|@]|9|@$A|1F|B|1G|1|1H]]|C|$]]|$1|D|3|E|5|6|7|1I|8|@$A|1J|B|1K|F|G]]|9|@$A|1L|B|1M|1|1N]]|C|$]]|$1|H|3|I|5|6|7|1O|8|@$A|1P|B|1Q|F|G]|$A|1R|B|1S|F|G]]|9|@$A|1T|B|1U|1|1V]|$A|1W|B|1X|1|1Y]]|C|$]]|$1|J|3|K|5|6|7|1Z|8|@$A|20|B|21|F|G]|$A|22|B|23|F|G]]|9|@$A|24|B|25|1|26]|$A|27|B|28|1|29]|$A|2A|B|2B|1|2C]|$A|2D|B|2E|1|2F]]|C|$]]|$1|L|3|M|5|N|7|2G|8|@]|9|@]|C|$O|P]]|$1|Q|3|R|5|6|7|2H|8|@]|9|@]|C|$]]|$1|S|3|-4|5|6|7|2I|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]|10|$5|V|W|X|C|$Y|11]]|12|$5|V|W|X|C|$Y|13]]|14|$5|V|W|X|C|$Y|15]]|16|$5|V|W|X|C|$Y|17]]|18|$5|V|W|X|C|$Y|19]]|1A|$5|V|W|X|C|$Y|1B]]|1C|$5|V|W|X|C|$Y|1D]]]]

If your <a href="https://developer.mozilla.org/en/Determining_the_dimensions_of_elements" rel="nofollow">content overflows its surrounding rectangle</a>, you still can scroll it with JS - regardless whether there are scrollbars shown or not by CSS.

For the whole window, you can use <a href="https://developer.mozilla.org/en/DOM/window.scrollTo" rel="nofollow"><code>window.scrollTo()</code></a> and its derivatives.

For single DOM elements, this can be accomplished by setting the <a href="https://developer.mozilla.org/en/DOM/element.scrollLeft" rel="nofollow"><code>scrollLeft</code></a> and <a href="https://developer.mozilla.org/en/DOM/element.scrollTop" rel="nofollow"><code>scrollTop</code></a> properties.

With both methods you will be able to build a (jQuery) animation, surely there are already some plugins for achieving that. I found <a href="http://flesler.blogspot.de/2007/10/jqueryscrollto.html" rel="nofollow">jQuery.ScrollTo</a> for example, but maybe the built-in methods <a href="http://api.jquery.com/scrollLeft/" rel="nofollow"><code>.scrollLeft()</code></a> and <a href="http://api.jquery.com/scrollTop/" rel="nofollow"><code>.scrollTop()</code></a> are enough for your purposes. In the <a href="http://api.jquery.com/scrollLeft/#dsq-comment-77972155" rel="nofollow">comments</a> also something like 

<pre><code> $(someSelector).animate({scrollLeft: someNumber}, 'slow');
</code></pre>

is mentioned.

blocks|key|2401988|text|如果你想做你自己的事，你可以这样做，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2401989|var+targetOffset+=+$('#post-10').offset().top+;
var+scrollElem+=+scrollableElement('html',+'body');

$(scrollElem).animate({scrollTop:+targetOffset},+400,+function()+{
++++//+scroll+is+complete
++++++location.hash+=+'post-10';
});

+++//+Use+the+first+element+that+is+"scrollable"++(cross-browser+fix?)
function+scrollableElement(els)+{
++++for+(var+i+=+0,+argLength+=+arguments.length;+i+<argLength;+i%2B%2B)+{
++++++++var+el+=+arguments[i],
++++++++$scrollElement+=+$(el);
++++++++if+($scrollElement.scrollTop()>+0)+{
++++++++++++return+el;
++++++++}+else+{
++++++++++++$scrollElement.scrollTop(1);
++++++++++++var+isScrollable+=+$scrollElement.scrollTop()>+0;
++++++++++++$scrollElement.scrollTop(0);
++++++++++++if+(isScrollable)+{
++++++++++++++++return+el;
++++++++++++}
++++++++}
++++}
++++return+[];
}|code-block|syntax|javascript|2401990|这是用于垂直滚动的。|2401991|对于水平滚动，您可以这样做：|2401992|++var+targetOffset+=+$('#post-10').offset().left+;
++++var+scrollElem+=+scrollableElement('html',+'body');

++++$(scrollElem).animate({scrollLeft:+targetOffset},+400,+function()+{
++++++++//+scroll+is+complete
++++++++++location.hash+=+'post-10';
++++});|2401993|我强烈推荐这个插件，用于水平/垂直滚动，效果很好。|2401994|http://demos.flesler.com/jquery/scrollTo/|offset|length|2401995|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|0|0|15|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|11|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|12|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|14|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|15|8|@]|9|@$Q|16|R|17|1|18]]|A|$]]|$1|S|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|P]]]]

If you want to do something of your own, you can do something like this,

<pre><code>var targetOffset = $('#post-10').offset().top ;
var scrollElem = scrollableElement('html', 'body');

$(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
 // scroll is complete
 location.hash = 'post-10';
});

 // Use the first element that is "scrollable" (cross-browser fix?)
function scrollableElement(els) {
 for (var i = 0, argLength = arguments.length; i &lt;argLength; i++) {
 var el = arguments[i],
 $scrollElement = $(el);
 if ($scrollElement.scrollTop()&gt; 0) {
 return el;
 } else {
 $scrollElement.scrollTop(1);
 var isScrollable = $scrollElement.scrollTop()&gt; 0;
 $scrollElement.scrollTop(0);
 if (isScrollable) {
 return el;
 }
 }
 }
 return [];
}
</code></pre>

This is for vertical scroll.

For horizontal scroll, you can do,

<pre><code> var targetOffset = $('#post-10').offset().left ;
 var scrollElem = scrollableElement('html', 'body');

 $(scrollElem).animate({scrollLeft: targetOffset}, 400, function() {
 // scroll is complete
 location.hash = 'post-10';
 });
</code></pre>

I would highly recommend this plugin for nice horizontal/vertical scrolls with a lot of effects. 

<a href="http://demos.flesler.com/jquery/scrollTo/" rel="nofollow">http://demos.flesler.com/jquery/scrollTo/</a>

I've got a very huge html page (like 7000*5000) and i'd need to move the user's view around that page with javascript.

I can easily unable the user to move around by himself by removing the browser scrollbars (with overflow:hidden on html), what i need to do next is to control the movement of the "camera" around that huge page in js/jquery.

I didn't found anything on the web even if I searched a lot, apart from using anchors with smooth jQuery scrolling, which is OK (even if not very neat) to move in a vertical way, but then it becomes very complicated to do it horizontally.

Is there any way of doing this ?

Thanks a lot :)

Moving the browser view around a huge html page without using scrollbars

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我有一个非常大的html页面(像7000*5000)，我需要用javascript在页面上移动用户的视图。我可以通过移除浏览器的滚动条(使用overflow:隐藏在html上)很容易地使用户无法自己移动，接下来我需要做的是在js/jquery中控制“摄像头”在那个巨大的页面上的移动。即使我搜索了很多，我也没有在网络上找到任何东西，除了使用带有平滑jQuery滚动的锚点之外，垂直移动是可以的(即使不

问在不使用滚动条的情况下在巨大的html页面周围移动浏览器视图
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在不使用滚动条的情况下在巨大的html页面周围移动浏览器视图EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在不使用滚动条的情况下在巨大的html页面周围移动浏览器视图
EN