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

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

本文关键字：周围 移动 视图 浏览器 巨大 滚动条 情况下 html      更新时间：2023-09-26

我有一个非常大的html页面（如7000 * 5000），我需要使用javascript在该页面上移动用户的视图。

我可以很容易地通过删除浏览器滚动条（在html上隐藏溢出：隐藏）来使用户自己移动，接下来我需要做的是在js/jquery中控制"相机"在那个大页面上的移动。

即使我搜索了很多，我也没有在网上找到任何东西，除了使用具有平滑jQuery滚动的锚点，这是可以的（即使不是很整洁）以垂直方式移动，但是然后水平做就变得非常复杂了。

有什么办法可以做到这一点吗？

非常感谢:)

jQuery scrollTo 和 localScroll 插件非常适合这一点。看看这里：http://flesler.blogspot.co.uk/2007/10/jquerylocalscroll-10.html 选项和这里的演示：http://demos.flesler.com/jquery/scrollTo/

这些插件允许您对动画进行排队，并定义同时水平和垂直滚动或垂直然后水平滚动等的设置。

尼尔

你周围的主要元素，div或部分，如果你真的有一个，把它设置得太固定了。与其在浏览器窗口中实际滚动，只需重新定位屏幕上的内容并产生滚动效果即可。用户不会知道其中的区别。

查看 jQuery 的 animate 函数。也许你可以做这样的事情： 

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

请更新您的问题，解释何时要移动页面，我可以尝试为您提供更多帮助。

如果你的内容溢出了周围的矩形，你仍然可以用JS滚动它 - 不管CSS是否显示滚动条。

对于整个窗口，您可以使用window.scrollTo()及其派生。

对于单个 DOM 元素，这可以通过设置 scrollLeft 和 scrollTop 属性来实现。

使用这两种方法，您将能够构建（jQuery）动画，当然已经有一些插件可以实现这一点。例如，我找到了jQuery.ScrollTo，但也许内置方法.scrollLeft()和.scrollTop()就足以满足您的目的。在评论中也像 

 $(someSelector).animate({scrollLeft: someNumber}, 'slow');

被提到。

如果你想

做你自己的事情，你可以做这样的事情，

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++) {
        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 [];
}

这适用于垂直滚动。

对于水平滚动，您可以做到，

  var targetOffset = $('#post-10').offset().left ;
    var scrollElem = scrollableElement('html', 'body');
    $(scrollElem).animate({scrollLeft: targetOffset}, 400, function() {
        // scroll is complete
          location.hash = 'post-10';
    });

我强烈推荐这个插件，用于具有很多效果的漂亮水平/垂直滚动。

http://demos.flesler.com/jquery/scrollTo/

相关文章：