Question

我正在网站上工作。我想设计一个带水平滚动的特定部分。当我们到达该部分时，页面的滚动应该停止，只有该部分应该滚动。我怎样才能做到这一点？

这里有一个链接。我想要这个（章节 - “在flipkart上做生意真的很容易”）
https://seller.flipkart.com/

Answer 1

您可能想要使用iframe标记。更多信息here，

Answer 2

您可以使用jquery的scrollLeft（）方法，这里是JSFiddle，您也可以使用jquery插件，如jquery.scrollpane.js / jquery.mousewheel.js。鼠标滚动演示的另一个选项是here。

希望它能帮助您解决问题。谢谢！

 $(".wrapper2").scroll(function(){
    $(".wrapper1")
        .scrollLeft($(".wrapper2").scrollLeft());
 });

Answer 3

您所指的网站正在使用名为scrollmagic

的库

http://scrollmagic.io

这是一个非常强大的脚本，可以让您创建许多不同的效果，它们将sticky/pinning behavior与multiple scroll directions结合起来。

为滚动添加一些自定义事件以自动开始向右移动。

查看完整的示例列表： http://scrollmagic.io/examples/index.html

Answer 4

你可以使用 overflow-x：scroll; 进行横向滚动， overflow-y：滚动; 进行垂直滚动

html,body{
  width:100%;
  height:100%;
  }
div{
  background-color:blue;
  }
section{
  width:200px;
  height:100px;
  background-color:#fff;
  overflow-x:scroll;
  margin-left:10%;
  overflow-y:scroll;
  }

<div>
  <h1>othercontets</h1>
  <p>#ADH Design....Videocon Virtual Mobile Phone Using HTML,CSS and JQuery

Videocon  Virtual Mobile Phone Using HTML,CSS and JQuery





(click on the above image to view the live demo)

or



.........................wait for more updates ....................................
.............................thanks for watching....................................</p>
  <section>
  <h1> here is the horizontal scroll</h1>
    <p>#ADH Design....Videocon Virtual Mobile Phone Using HTML,CSS and JQuery

Videocon  Virtual Mobile Phone Using HTML,CSS and JQuery





(click on the above image to view the live demo)

or

(click on this link to view the live demo)


Key Features :-
1.This Design is Completely using HTML and CSS excluding two Images(one for background and other for logo ).
2.You Can Check Full Code and Live Demo on Code-pen By Clicking The Above Image.
3. JQuery and JS is only used for two purposes(to show current date and time on screen and to manage click events.)
4.You can see the current date and time on screen. 
Before Use :-
1.You need  to change the view settings on code-pen(click on  change view and then select the snippet in which there code boxes are on right side) for better appearance. 






2.You need to unlock the Phone before use it.To unlock the Phone use need to click unlock button and then hash button.
 

(If You Press other Icons Like Star ,Which will Show Some Warning Messages) 
3.This system allows you to dial a maximum of 12 numbers at a time (you can dial a number by clicking on corresponding button).
4.You need to click call-disconnect button to clear all dialed numbers.




(Note : I'm used calc() function on this code to adjust the left and right margin ,it support only on latest version of browsers.so recommended to use  latest version for better appearance).

Special Credits :-  
Sarath .P (Graphic,Web Designer).
Antony Naveen (Software Tester).
My GECI mates(for their mass support).
Stack overflow community(they push me when i got stuck)  
and You for watching this

.........................wait for more updates ....................................
.............................thanks for watching....................................</p>
  </section>
</div>

如何在网页的特定部分实现水平滚动

4 个答案: