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

Question

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

here's a reference image here

Answer 1

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

看看我的基本示例：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>