Question

我有一个父div与两个子div并排调用。我想要正确的div scolling和左边的一个被修复。确切地说，我想要这样的东西：https://venmo.com/about/product/

到目前为止，这是代码：

HTML：

<div class="row" id="spec" style="height:700px">
   <div class="col-sm-12 col-md-6 scrollable" style="height:700px;overflow-y:scroll">
      <section id="spec-text1" class="spec-text" style="height:400px">scrolling text in section1</section>
      <section id="spec-text1" class="spec-text" style="height:400px">scrolling text in section2</section>                                                       
      <section id="spec-text1" class="spec-text" style="height:400px">scrolling text in section3</section>                                                         
   </div>                                                                
   <div id="how-it-works" class="col-sm-12 col-md-6 text-center">        
   <img src="image_phone.png"/></div>
</div>

问题是当鼠标位于固定div上时，滚动div会垂直滚动！我希望滚动div继续滚动，如果鼠标在另一个div上，就像上面的示例一样。

由于

Answer 1

如果你想复制其他模板，请先检查DOM，css和js。

<div class="phone asset-feature-iphone">

<强>更新

你的问题仅限于此。

但你的评论想要更多。所以请下次提供一个完整的问题，这样你就可以阻止那些想要帮助的人你做两次工作。（或者我读错了你的问题可能是错的）

复制/克隆模板的关键只是看看DOM，css和JS 可以复制，分析并查看更改内容

在这里，我将向您展示我从该模板中获得的内容

打开控制台。您会发现.phone在开头没有内联元素css。
开始滚动时。您会注意到position: fixed有内联css。所以我们可以说：1。有一个javascript改变了这一点。 2.他们添加了css：opacity:1和.phone
我们滚动到结尾。我们知道https://cdn1.venmo.com/production/js/auth-legacy.min.js仍在那里。但是我们看不到。因为不透明度相同或低于0。
我们注意到事件滚动是触发器（现在只是猜测）。为了确保，让我们找到javascript。我们找到了scroll。我们用http://jsbeautifier.org/取消了，所以我们可以阅读。然后我找到..snippet.. }), define("auth-legacy/public/js/phone", ["jquery", "jquery-scrollspy"], function(e) { ..snippet..，所以我找到了scrollspy。

.spec-text

让我们谷歌，我们发现https://github.com/softwarespot/jquery-scrollspy
尝试尝试。演示：http://output.jsbin.com/xoyenamafe

我所做的与venmo.com不完全相同，因为venmo.com以不同的select year, (UserCount - @prev + ((@prev:=UserCount)-UserCount)) as diff from Employees;运行功能（更改手机图像，不透明度，变换等）。我所做的只是使用最后一个.spec-text作为触发器，以不透明度显示和隐藏手机图像。

两个div并排，一个是scolling另一个是固定的，但如果鼠标也在固定div上滚动div

1 个答案: