是否可以制作一个水平和垂直可滚动的网站？

Question

我正在尝试制作一个实验性叙事网站，在一个页面中讲述两个不同的故事。该网站目前只能水平滚动，我只有一个大的固定图像顶部的图像，中间有一个大洞。我最初在水平滚动末尾有一个可点击的图像，以便它链接到另一个故事，但我想知道我是否可以有水平滚动和垂直滚动以便它同时显示不同的图像？就像当用户垂直滚动时，水平滚动停止；当用户水平滚动时，垂直滚动停止？谢谢。

here's a reference image here

Answer 1

是的。一种方法是使用 jQuery 捕获 mousewheel 事件以触发自定义滚动功能，同时使用 overflow: hidden 隐藏默认滚动条以避免任何奇怪的行为。所以它实际上是关于创建一个受控环境，在该环境中，更改通过事件句柄而不是本机浏览器发生 "scrolling"。

看看我的基本示例：view on codepen

// jQuery Next or First / Prev or Last plugin

$.fn.nextOrFirst = function(selector){
    var next = this.next(selector);
    return (next.length) ? next : this.prevAll(selector).last();
};

$.fn.prevOrLast = function(selector){
    var prev = this.prev(selector);
    return (prev.length) ? prev : this.nextAll(selector).last();
};

// Scroll Functions

function scrollSection(parent, dir) {
 var active = "active",
    section = parent.find("."+active);
  if (dir == "prev") {
    section.removeClass(active).prevOrLast().addClass(active);
  } else {
    section.removeClass(active).nextOrFirst().addClass(active);
  }
}

// Bind Scroll function to mouse wheel event

$('#vertical, #horizontal').on('mousewheel wheel', function(e){
  if (e.originalEvent.wheelDelta /120 > 0) { // scroll up event
    scrollSection($(this), "prev");
  } else { // scroll down event
    scrollSection($(this));
  }
});

html, body, #vertical {
  color: #FFF; margin: 0; padding: 0;
  height: 100%; overflow: hidden; }
  
#horizontal {
  height: 70vh; width: 70vh;
  position: fixed; margin: auto;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  border-radius: 100%;
  overflow: hidden; }

section {
  height: 0%;
  box-sizing: border-box;
  transition: 1s;
  overflow: hidden; }

#horizontal section {
  width: 100%; height: 100%;
  min-width:0%;
  text-align: center; }

.inner { padding: 3em; }

#vertical section.active { height: 100%; }

#horizontal section.active { min-width: 100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="horizontal">
  <section class="active" style="background:Black"><div class="inner">Horizontal 1</div></section>
  <section style="background:BurlyWood"><div class="inner">Horizontal 2</div></section>
  <section style="background:MediumSlateBlue"><div class="inner">Horizontal 3</div></section>
</div>
<div id="vertical">
  <section class="active" style="background:SteelBlue"><div class="inner">Vertical 1</div></section>
  <section style="background:DarkSlateBlue"><div class="inner">Vertical 2</div></section>
  <section style="background:HotPink"><div class="inner">Vertical 3</div></section>
</div>

你甚至可以让它同时滑动两个盒子:

// jQuery Next or First / Prev or Last plugin

$.fn.nextOrFirst = function(selector){
    var next = this.next(selector);
    return (next.length) ? next : this.prevAll(selector).last();
};

$.fn.prevOrLast = function(selector){
    var prev = this.prev(selector);
    return (prev.length) ? prev : this.nextAll(selector).last();
};

// Scroll Functions

function scrollSection(parent, dir) {
 var active = "active",
    section = parent.find("."+active);
  if (dir == "prev") {
    section.removeClass(active).prevOrLast().addClass(active);
  } else {
    section.removeClass(active).nextOrFirst().addClass(active);
  }
}

// Bind Scroll function to mouse wheel event

$('body').on('mousewheel wheel', function(e){
  if (e.originalEvent.wheelDelta /120 > 0) { // scroll up event
    scrollSection( $('#vertical'), "prev");
    scrollSection( $('#horizontal'), "prev");
  } else { // scroll down event
    scrollSection( $('#vertical') );
    scrollSection( $('#horizontal') );
  }
});

html, body, #vertical {
  color: #FFF; margin: 0; padding: 0;
  height: 100%; overflow: hidden; }
  
#horizontal {
  height: 70vh; width: 70vh;
  position: fixed; margin: auto;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  border-radius: 100%;
  overflow: hidden; }

section {
  height: 0%;
  box-sizing: border-box;
  transition: 1s;
  overflow: hidden; }

#horizontal section {
  width: 100%; height: 100%;
  min-width:0%;
  text-align: center; }

.inner { padding: 3em; }

#vertical section.active { height: 100%; }

#horizontal section.active { min-width: 100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="horizontal">
  <section class="active" style="background:Black"><div class="inner">Horizontal 1</div></section>
  <section style="background:BurlyWood"><div class="inner">Horizontal 2</div></section>
  <section style="background:MediumSlateBlue"><div class="inner">Horizontal 3</div></section>
</div>
<div id="vertical">
  <section class="active" style="background:SteelBlue"><div class="inner">Vertical 1</div></section>
  <section style="background:DarkSlateBlue"><div class="inner">Vertical 2</div></section>
  <section style="background:HotPink"><div class="inner">Vertical 3</div></section>
</div>

是否可以制作一个水平和垂直可滚动的网站？

Is it possible to make a website that is horizontally AND vertically scrollable?

javascript

css

jquery

horizontal-scrolling

vertical-scrolling