如何在Mobile Safari中显示滚动条？

Question

我编写的jQuery时间选择器插件使用div作为时间列表的包含块，而在Mobile Safari上没有滚动条表示可用时间多于可见时间。我知道使用两个手指在div中滚动（至少在iPad上），但这只有在用户知道有更多内容要滚动到时才有效，并且没有任何迹象表明存在。所以，我的问题是：有没有人能够在Mobile Safari中显示滚动条？你怎么做的？

Answer 1

假设您使用的是iOS5.0或更高版本，我认为您必须使用以下内容：

-webkit-overflow-scrolling: auto（这是默认样式）

auto：单手滚动没有动量。

另一种可用的风格是

-webkit-overflow-scrolling: touch

touch：原生样式滚动。指定此样式具有创建放样上下文的效果（如不透明度，蒙版和变换）。

使用touch模式，滚动条将在用户触摸和滚动时显示，但在不使用时会消失。如果您希望始终可见，那么此old post将为您提供帮助：

::-webkit-scrollbar {
    -webkit-appearance: none;// you need to tweak this to make it available..
    width: 8px;
}

@BJMC的另一段代码：

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 0 1px rgba(255,255,255,.5);
}

Original Source

关于this demo's行为的

编辑，您应该使用jQuery，因为它会对您有很大帮助，$(document).ready(function(){//your code with timer})带有计时器的代码需要将CSS属性重置为在期望的时间之后正常（假设是5秒）

对于演示（您已描述过），这是通过onhover事件启动的，请检查我为此创建的fiddle。

可以在桌面浏览器中重现结果，也可以在iPad上使用，只需添加定时器代码即可满足您的要求。

Answer 2

关于原始问题：拥有滚动条的最佳解决方案是使用外部库（已推荐iScroll很好，但即使是jQuery UI itself contains scrollbars）。但是显示永远存在的滚动条可能会偏离一般的iOS UI（见下文）。

替代方案是用其他GUI元素指示内容是可滚动的。考虑元素末尾的小梯度字段（内容淡化为背景），表示内容在触摸和滚动时会继续。

在iOS5 overflow: scroll中按预期运行，即允许div在div的维度指定的区域内用一根手指向上/向下滚动{{1}}。但是可滚动的div没有滚动条。这与iOS（5）中的常规UI略有不同。通常也没有滚动条，但是当用户开始滚动内容区域并且在触摸事件停止后再次淡出时，它们会出现。

Answer 3

回答上面的Sam Hasler评论。 Nicescroll 3是一个jquery插件，可以根据您的需要执行淡入/淡出效果，并可在所有主要的移动/平板电脑/桌面浏览器中使用。

Live demo

代码：

$(document).ready(function() {    
    $("html").niceScroll({styler:"fb",cursorcolor:"#000"});
    $("#divexample1").niceScroll();//or styles/options below
    $("#divexample2").niceScroll("#wrapperexample2",{cursorcolor:"#0F0",boxzoom:true});
    $("#divexample3").niceScroll("#divexample3 iframe",{boxzoom:true});
  });

Answer 4

如果您希望滚动始终可见，

不要设置 package com.example.riskcalculator; import android.support.design.widget.TabLayout; import android.support.design.widget.FloatingActionButton; import android.support.design.widget.Snackbar; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.os.Bundle; import android.view.LayoutInflater; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; public class MainActivity extends AppCompatActivity { /** * The {@link android.support.v4.view.PagerAdapter} that will provide * fragments for each of the sections. We use a * {@link FragmentPagerAdapter} derivative, which will keep every * loaded fragment in memory. If this becomes too memory intensive, it * may be best to switch to a * {@link android.support.v4.app.FragmentStatePagerAdapter}. */ private SectionsPagerAdapter mSectionsPagerAdapter; /** * The {@link ViewPager} that will host the section contents. */ private ViewPager mViewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager()); // Set up the ViewPager with the sections adapter. mViewPager = (ViewPager) findViewById(R.id.container); mViewPager.setAdapter(mSectionsPagerAdapter); TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs); tabLayout.setupWithViewPager(mViewPager); FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG) .setAction("Action", null).show(); } }); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.menu_main, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); //noinspection SimplifiableIfStatement if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } /** * A placeholder fragment containing a simple view. */ public static class PlaceholderFragment extends Fragment { /** * The fragment argument representing the section number for this * fragment. */ private static final String ARG_SECTION_NUMBER = "section_number"; public PlaceholderFragment() { } /** * Returns a new instance of this fragment for the given section * number. */ public static PlaceholderFragment newInstance(int sectionNumber) { PlaceholderFragment fragment = new PlaceholderFragment(); Bundle args = new Bundle(); args.putInt(ARG_SECTION_NUMBER, sectionNumber); fragment.setArguments(args); return fragment; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_main, container, false); TextView textView = (TextView) rootView.findViewById(R.id.section_label); textView.setText(getString(R.string.section_format, getArguments().getInt(ARG_SECTION_NUMBER))); return rootView; } } /** * A {@link FragmentPagerAdapter} that returns a fragment corresponding to * one of the sections/tabs/pages. */ public class SectionsPagerAdapter extends FragmentPagerAdapter { public SectionsPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { // getItem is called to instantiate the fragment for the given page. // Return a PlaceholderFragment (defined as a static inner class below). return PlaceholderFragment.newInstance(position + 1); } @Override public int getCount() { // Show 3 total pages. return 3; } @Override public CharSequence getPageTitle(int position) { switch (position) { case 0: return "SYSTEM A"; case 1: return "SYSTEM B"; case 2: return "SYSTEM C"; } return null; } } }

然后设置滚动条的自定义样式

-webkit-overflow-scrolling: touch

你失去了动量效果，但滚动条总会在那里。

（在iPhone 4 / iOS 7下测试）

Answer 5

移动游猎，据我所见，不支持滚动条。 我能找到的最好的插件是this。

其演示可用here。 它还有多个predefined skins以适合您的应用。

这里有一个你会得到的样本 -

Answer 6

按照惯例，iOS上不使用滚动条。

对于overflow: scroll的div，滚动的唯一原生方式是用两根手指。

您可以查看iScroll，这是一个JavaScript库，可以处理触摸事件并实现div的单指动量滚动（用户通常期望在本机应用程序中使用）。

Answer 7

直到ios5你无法滚动内部div - 所以当你尝试滚动时你可能没有看到滚动条，因为没有滚动条。

我还没有在ios5上测试，但据推测滚动内部div现在可以工作了。

如果它不是内部div，那么你应该能够看到滚动条只在滚动时 - 这不仅仅是在ios上了 - 狮子也已经摆脱了所有原生滚动条。您只能在滚动窗口或首次加载窗口时看到它们。