javascript - rails 4 : View Doesn't Scroll when using One Page Scroll v1. 3-6ren

javascript - rails 4 : View Doesn't Scroll when using One Page Scroll v1. 3

转载作者：太空宇宙更新时间：2023-11-04 03:42:37

28

4

您好，我正在使用 Rails，我正在尝试使用此处显示的 One Page Scroll 插件:http://www.thepetedesign.com/demos/onepage_scroll_demo.html

我有一个几乎是空白的应用程序(就 View 和样式表而言)。这是当前不滚动的页面的布局和 View :

layouts/application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>Lorem</title>
    <%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
    <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
    <%= csrf_meta_tags %>
</head>
<body>
  <div class='main'> <!--One Page! -->
    <div class='row'>
      <div id='tasmbloch'>
        <div id='id'>
          <%= image_tag 'ban_Trans.png' %>
       </div>
      </div>
    </div>

   <%= yield %>
 </div>
</body>
</html>

对应的 View :

<div class='section'>
       <%= image_tag "lorem_borem.png"%>
</div>
<div class='section'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum."
</div>

我在我的 app/assets/ javascripts 和 stylesheets 目录中包含了 javascript 和一页滚动对应的css。我在调用插件的 jQuery 片段中写了一个 console.log() 语句来确认它被调用了，确实如此。

这是通过 application.css

间接包含的单页滚动 css

body, html {
  margin: 0;
  overflow: hidden;
  -webkit-transition: opacity 400ms;
  -moz-transition: opacity 400ms;
  transition: opacity 400ms;
}

body, .onepage-wrapper, html {
  display: block;
  position: static;
  padding: 0;
  width: 100%;
  height: 100%;
}

.onepage-wrapper {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  padding: 0;
  -webkit-transform-style: preserve-3d; 
}

.onepage-wrapper .section {
  width: 100%;
  height: 100%; 
}

.onepage-pagination {
  position: absolute;
  right: 10px;
  top: 50%;
  z-index: 5;
  list-style: none;
  margin: 0;
  padding: 0; 
}
.onepage-pagination li {
  padding: 0;
  text-align: center;
}
.onepage-pagination li a{
  padding: 10px;
  width: 4px;
  height: 4px;
  display: block;

}
.onepage-pagination li a:before{
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(0,0,0,0.85);
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

.onepage-pagination li a.active:before{
  width: 10px;
  height: 10px;
  background: none;
  border: 1px solid black;
  margin-top: -4px;
  left: 8px;
}

.disabled-onepage-scroll, .disabled-onepage-scroll .wrapper {
  overflow: auto;
}

.disabled-onepage-scroll .onepage-wrapper .section {
  position: relative !important;
  top: auto !important;
  left: auto !important;
}
.disabled-onepage-scroll .onepage-wrapper {
  -webkit-transform: none !important;
  -moz-transform: none !important;
  transform: none !important;
  -ms-transform: none !important;
  min-height: 100%;
}

.disabled-onepage-scroll .onepage-pagination { 显示:无；

body.disabled-onepage-scroll, .disabled-onepage-scroll .onepage-wrapper, html {
  position: inherit;
}

最佳答案

知道这是一个旧帖子，但遇到了同样的问题。我认为您的问题是因为您让插件可以执行以下操作:

调用<head></head>中的函数，不是页脚:

...
<script>
$(document).ready(function(){
    $(".main").onepage_scroll({
            sectionContainer: "section",
            easing: "ease",

            animationTime: 1000,
            pagination: true,
            updateURL: false,
            beforeMove: function(index) {},
            afterMove: function(index) {},
            loop: false,
            keyboard: true,
            responsiveFallback: false,
            direction: "vertical"
        });
...
</script>

从那时起，一切对我来说就像一种魅力。

关于javascript - rails 4 : View Doesn't Scroll when using One Page Scroll v1. 3，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24664934/

28

4

0

文章推荐： linux - 为什么我无法运行位于 bin 中的文件？

文章推荐： c++ - 如何在 Arduino 中获得连续的 LED 闪光灯？ [C/C++]

文章推荐： linux - 更改主机名 bash 脚本

文章推荐： c - 如何协调两个进程之间的共享内存

MySQL相似表的索引使用不一致: 'Using index' and 'Using where; Using index'
我在优化 JOIN 以使用复合索引时遇到问题。我的查询是: SELECT p1.id, p1.category_id, p1.tag_id, i.rating FROM products p1
sql - 优化查询以删除 "Using where; Using temporary; Using filesort"
我有一个简单的 SQL 查询，我正在尝试对其进行优化以删除“使用位置；使用临时；使用文件排序”。这是表格: CREATE TABLE `special_offers` ( `so_id` int
mysql - EXPLAIN 语句说 'Using where; Using index' 如果在查询中设置了 USE INDEX() 否则就说 'Using where'
我有一个具有以下结构的应用程序表 app_id VARCHAR(32) NOT NULL, dormant VARCHAR(6) NOT NULL, user_id INT(10) NOT NULL
mysql - Extra :-Using where; Using temporary; Using filesort如何优化MYSQL
此查询的正确索引是什么。我尝试为此查询提供不同的索引组合，但它仍在使用临时文件、文件排序等。总表数据 - 7,60,346 产品= '连衣裙' - 总行数 = 122 554 CREATE TAB
mysql - 为什么额外的是 "using where;using index"而不是 "using index"
为什么额外的是“使用where;使用索引”而不是“使用索引”。 CREATE TABLE `pre_count` ( `count_id`
按日期排序时，MySQL 数据库使用 "Using where; Using temporary; Using filesort"
我有一个包含大量记录的数据库，当我使用以下 SQL 加载页面时，速度非常慢。 SELECT goal.title, max(updates.date_updated) as update_sort F
MySQL - 'Using index condition' 与 'Using where; Using index'
我想知道 Using index condition 和 Using where 之间的区别；使用索引。我认为这两种方法都使用索引来获取第一个结果记录集，并使用 WHERE 条件进行过滤。 Q1。有什
Cannot setup TypeScript to use `using` keyword(无法将TypeScript设置为使用“using”关键字)
I am using TypeScript 5.2 version, I have following setup:我使用的是TypeScript 5.2版本，我有以下设置： { "
Cannot setup TypeScript to use `using` keyword(无法将TypeScript设置为使用“using”关键字)
I am using TypeScript 5.2 version, I have following setup:我使用的是TypeScript 5.2版本，我有以下设置： { "
Cannot setup TypeScript to use `using` keyword(无法将TypeScript设置为使用“using”关键字)
I am using TypeScript 5.2 version, I have following setup:我使用的是TypeScript 5.2版本，我有以下设置： { "
mysql - 如何避免MySQL中的 "Using index; Using temporary; Using filesort "，21表JOIN
mysql Ver 14.14 Distrib 5.1.58，用于使用 readline 5.1 的 redhat-linux-gnu (x86_64) 我正在接手一个旧项目。我被要求加快速度。我通过
mysql - OrmLite(服务堆栈): Only use temporary db-connections (use 'using' ?)
在过去 10 多年左右的时间里，我一直打开数据库 (mysql) 的连接并保持打开状态，直到应用程序关闭。所有查询都在连接上执行。现在，当我在 Servicestack 网页上看到示例时，我总是看到
sql - 优化 MySQL 查询以避免 "Using where; Using temporary; Using filesort"
我使用 MySQL 为我的站点构建了一个自定义论坛。列表页面本质上是一个包含以下列的表格:主题、上次更新和# Replies。数据库表有以下列: id name body date topic_id
mysql - EXPLAIN中的 "Using index"和 "Using where; Using index"有什么区别
在mysql中解释的额外字段中你可以得到: 使用索引使用where;使用索引两者有什么区别？为了更好地解释我的问题，我将使用下表: CREATE TABLE `test` ( `id` bi
using - Haxe中的 `using`关键字是什么？
我经常看到人们在其Haxe代码中使用关键字using。它似乎在import语句之后。例如，我发现这是一个代码片段: import haxe.macro.Context; import haxe.ma
克洛尤尔 : how do I use use "and" in "reduce"?
这个问题在这里已经有了答案: "reduce" or "apply" using logical functions in Clojure (2 个答案) 关闭 8 年前。 “and”似乎是一个宏，
克洛尤尔 : how do I use use "and" in "reduce"?
这个问题在这里已经有了答案: "reduce" or "apply" using logical functions in Clojure (2 个答案) 关闭 8 年前。 “and”似乎是一个宏，
c++ - 注册表模式 : to use or not to use
我正在考虑在我的应用程序中使用注册表模式来存储指向某些应用程序窗口和 Pane 的弱指针。应用程序的一般结构如下所示。该应用程序有一个 MainFrame 顶层窗口，其中有几个子 Pane 。可以有
When to use == and when to use is?(什么时候使用==，什么时候使用IS？)
奇怪的是：。似乎a是b或多或少被定义为id(A)==id(B)。用这种方式制造错误很容易：。有些名字出人意料地出现在Else块中。解决方法很简单，我们应该使用ext==‘.mp3’，但是如果ext表面
mysql - 优化 'GROUP BY'-查询，消除 'Using where; Using temporary; Using filesort'
我遇到了一个我似乎无法解决的 MySQL 问题。为了能够快速执行用于报告目的的 GROUP BY 查询，我已经将几个表非规范化为以下内容(该表由其他表上的触发器维护，我已经同意了与此): DROP T

首页

博学

6Ren·AI

商城

javascript - rails 4 : View Doesn't Scroll when using One Page Scroll v1. 3